Cómo hacer zoom con una sóla imagen - Cómo hacer zoom con una sóla imagen

El efecto que queremos crear es que al pinchar sobre una imagen pequeña (thumbnail), ésta se agrande (zoomed). Esto se puede realizar con CSS simplemente definiendo dos imágenes distintas (una pequeña y otra grande) para los estados normal y hover del enlace. Es decir, si el enlace es:

---

<a href="zoomed.jpg">ver imagen</a>

se definen en el CSS:

---

#zoom a {
...
background: url("thumbnail.jpg") top left no-repeat;
...
}
#zoom a:hover {
...
background-image: url("zoomed.jpg");
...
}

Donde thumbnail.jpg y zoomed.jpg son los ficheros correspondientes a las imágenes grande y pequeña respectivamente.

---

Sin embargo, veamos cómo podemos realizar este mismo efecto usando una única imagen. El truco consiste en utilizar un fichero común con las dos imágenes y las propiedades background-position∞, width∞ y height∞, en el estado hover del link que apunta a la imagen, y situarla en el trozo que corresponde a la imagen grande.

---

El fichero que vamos a utilizar como ejemplo es awandieboth.jpg∞, cuya dimensión, en píxeles, es 218 de ancho y 265 de alto. La imagen pequeña mide 136 de ancho por 101 de alto y la imagen grande, 218 de ancho por 164 de ancho.

---

El texto que acompaña a la imagen thumbnail, junto con el enlace a la imagen, se incluye dentro de un bloque definido en el CSS como id=zoom:

---

<div id="zoom">

• lt;a href="awandieboth.jpg">Ver foto</a>

</div>

Esto permitirá, también, para navegadores que no visualicen bien el CSS, acceder a las dos imágenes al mismo tiempo.

---

Veamos la definición del estado normal de a:

---

#zoom a {

En widht y height se ponen las dimensiones de la imagen pequeña (136x101). En background se pone el fichero con las dos imágenes, ajustado al tamaño de la caja. El parámetro 'text-indent', con el valor negativo de 8em permite desplazar el texto del enlace 'ver imagen' hacia la izquierda, lo que hace que desaparezca.

---

'Overflow: hidden' ajusta el tamaño del contenido al declarado del elemento. Esto se realiza siempre que el contenido de un elemento no encaja o coincide con el rectángulo definido por alguna de las propiedades top , left , height y width. 'Display: block' indica que la definición corresponde a un elemento de bloque, no de línea (<em>) ni de lista (<li>). 'Float: right' ajusta la caja con la imagen a la derecha y 'margin' y 'border' establecen los margenes y el tipo de borde.

---

Con el estado 'hover' se establecen las dimensiones de la caja y sus propiedades, al pasar el ratón por encima de la imagen pequeña. Aquí, el parámetro 'background-position' juega el papel protagonista de este truco:
#zoom a:hover {

La caja se redimensiona a un tamaño de 218x164 y los valores de la propiedad 'background-position' colocan la imagen grande del fichero awandieboth.jpg en esta nueva caja que tiene justamente el mismo tamaño. 0 y 104 son los valores del eje X (posición horizontal) y del eje Y (posición vertical) del fichero awandieboth.jpg que queremos llevar a la esquina superior izquierda de la caja que se define en el estado hover. Es decir, si suponemos que el punto (0,0) es la esquina superior izquierda, con background-position: 0 -101px colocamos la imagen en el punto (0,-101) que es como si desplazáramos la imagen 101 píxeles hacia arriba, justamente para situar la imagen grande del fichero awandieboth.jpg en esta nueva caja.

---

Pueden ver el ejemplo completo∞.