Hoy os traemos una demo de cómo conseguir agrandar o hacer zoom de una imagen al pasar el ratón por encima (hover). El efecto es similar a los típicos lightbox o modals, pero con una diferencia sustancial, solo vamos a usar CSS, nada de JavaScript. Una solución sencilla y ligera si lo único que queremos es mostrar con algo mas detalla una imagen, sin preocuparnos de tener que cargar una librería o recursos externo para ello.
Para ir preparando los materiales (como si fuera un tutorial de manualidades :D) y antes de tocar el CSS, necesitaremos dos versiones de la misma imagen que queremos usar, una en tamaño en miniatura (donde vamos a pasar el ratón por encima) y otra a tamaño real o tamaño ampliado, que será la que se muestre como zoom. Pero si la correcta apariencia de la imagen en miniatura no es importante para ti, puedes obviar este punto y la misma imagen para ambas ubicaciones, y que sea el navegador el que las redimensione, siempre que usemos correctamente el CSS responsive para las imágenes. Así nos ahorramos una llamada extra al servidor 😉
Posicionar la imagen ampliada con CSS
El efecto consiste en mostrar la imagen a tamaño real encima de la miniatura. Podemos optar por mostrarla debajo o incluso en los laterales, pero como no sabemos de antemano si tendremos espacio suficiente por la resolución de la pantalla del usuario o contenido inferior, preferimos la ubicación en la parte superior.
El HTML es muy sencillo, como en el ejemplo del icono animado, necesitamos un contenedor con dos elementos hijos, por un lado la imagen en miniatura, y por otro la imagen en tamaño real contenida en un elemento span:
<div class="container-enlarge">
<img src="http://example.com/imagen-reducida.png">
<span><img src="http://example.com/imagen-ampliada.png"></span>
</div>En cuanto al CSS, lo importante es posicionar el elemento span como absoluto con unas coordenadas fuera de área de navegación, y cambiar dichas coordenadas cuando hagamos hover sobre el contenedor, en este caso el elemento div con la clase .container-enlarge:
.container-enlarge {
display: inline-block;
position: relative;
margin: 15px;
}
.container-enlarge > img {
height: auto;
max-width: 100%;
width: 150px;
border-radius: 5px;
}
.container-enlarge span {
position: absolute;
top: -9999em;
left: -9999em;
}
.container-enlarge:hover span {
top: -320px;
left: -75px;
width: 300px;
}Las dimensiones y posición del elemento span están definidas de antemano pues conocemos la resolución que va a tener la imagen ampliada.
Como hemos optado por varias imágenes en este ejemplo, las hemos recogido en el contenedor .images-container y centrado usando text-align: center;, pero esto ya es un paso opcional.
Soluciones sencillas a problemas sencillos con CSS
A veces en diseño web nos complicamos la vida usando librerías externas y plugins pesados cuando nos enfrentamos a problemas o requerimiento que se pueden solucionar de una forma mas sencilla y ligera. Este ejemplo sobre ampliar imágenes usando solo CSS surge de un caso real donde el cliente necesitaba ubicar unos logotipos y sellos de calidad en el footer de la página y que al pasar el ratón por encima de cada uno de ellas, el visitante tuviera la oportunidad de ver en mas detalle dicho logotipo.
En nuestro primer acercamiento encontramos una libraría JS que nos permitía generar este efecto. Tendríamos entonces que integrar la librería, modificar el HTML para añadir las clases necesarias y por último maquetar el CSS para personalizar los estilos que trae la libraría por defecto. Como efecto colaterales, además la librería era de pago (coste extra para el cliente) y supondría una llamada extra el servidor, con lo que la carga de la web se ralentiza y empeoramos la UX.
Con la solución CSS, solo tenemos que añadir las líneas detalladas a la hoja de estilos, y modificar el HTML, ahorrando costes para el cliente y sin que esta modificación repercuta en el peso y carga de la web.
Por cierto, las imágenes de la demo provienen de proyectos y artículos mas que interesantes que os invito a visitar y comentados en SiloMag #16, SiloMag #04 y SiloMag #01, en ese orden. Espero que os haya servido de ayuda!
