Cómo hacer zoom con css y una única imagen
Una de las cosas que más me gustan del Awablog son sus awooligans. Esta foto fue uno de sus regalos por su 24 cumpleaños. pasen el ratón por encima de la foto para verla ampliada.
Pero de lo que yo quería hablarles es del efecto de zoom que se puede realizar con algo de css y sólo con una imagen. Es fácil conseguirlo con dos imágenes, una para la imagen thumbnail (pequeña) y otra para la imagen zoomed (grande), pero hay otro método, explicado en Simple Bits, usando la propiedadbackground-position que es el que les explicamos en el tutorial ¿cómo hacer zoom con css y una única imagen?.
La imagen que utlizaremos es esta y pueden ver nuestro ejemplo, adaptado del de Simple Bits aquí.
En resumen, para conseguir el efecto de zoom que pueden ver en este post, sigan los siguientes pasos:
1. Crear un fichero jpg con las dos imágenes, la pequeña arriba y la grande abajo, de forma similar a esta.
2. Poner las dimensiones y la url de la imagen pequeña en la definición css de #zoom a {….}.
3. Poner las dimensiones de la imagen grande en la definición css de #zoom a:hover {…}.
4. Poner en background-position el alto de la imagen pequeña en negativo.
5. Añadir al código html, el enlace al fichero con ambas imágenes:
<div class="zoom">
<a href="......">ver imagen</a>
</div>
También puedes leer:
