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>
Lorem ipsum dolor sit ...
</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 {
float: right;
margin: 0 0 10px 10px;
border: 1px solid #000;
text-indent: -8em; /* hide the link text */
overflow: hidden;
display: block;
width: 136px; /* show only thumbnail */
height: 101px;
background: url(awandieboth.jpg) no-repeat top left;
}
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 {
width: 218px; /* adjust size to zoomed photo */
height: 164px;
background-position: 0 -101px; /* move the image so only the big one shows */
}
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.
