¿Hay alguna manera de acercar la imagen de fondo de un usando solo HTML / CSS?

Sí hay. ¿Por qué alguien te dice que no lo hay? Demostración (imagen del mouseover para ver qué sucede). JAVASCRIPT CERO INVOLUCRADO.

main.css

.cover {
background: url(some_image.gif) no-repeat 0px 0px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 50px;
height: 50px;
transition: all .2s ease-in-out;
} .cover:hover {
transform: translate(175px, 175px) scale(8);
}


• ¿Qué base de datos se usa para PHP?
• ¿Se descontinuará JQuery por el uso creciente de AngularJS?
• ¿Debo poner tutoriales en el sitio web de mi perfil para encontrar un trabajo de desarrollador web?
• Cómo crear mi propio sitio web desde cero y cuál es el costo para alojarlo
• ¿Cuál es la mejor (y más rápida) forma de aprender a codificar (desarrollo web)?

.cover {
background: url(some_image.gif) no-repeat 0px 0px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 50px;
height: 50px;
transition: all .2s ease-in-out;
} .cover:hover {
transform: translate(175px, 175px) scale(8);
}


index.html

Código específico para la demo

.cubrir {
fondo: url (some_image_url) sin repetición 0px 0px;
-webkit-background-size: cubierta;
-moz-background-size: cubierta;
-o-background-size: cubierta;
tamaño de fondo: cubierta;
ancho: 100px;
altura: 100 px;
transición: todos los 0.2s de entrada y salida;
pantalla: bloque en línea;
posición: relativa;
}

.cover: active {
transformar: escala (8);
}

.cover-container {
desbordamiento: oculto;
ancho: 100px;
altura: 100 px;
borde: 1px blanco sólido;
margen: 25px 0 0 25px;
}