Zoom-Info – Muestra información en imágenes con animación gracias a jQuery

Muy buen tutorial de Xyberneticos en el que nos presenta Zoom-Info, un código con jQuery para que al pasar el ratón por encima de las imágenes (hover), éstas se hagan pequeñas dejando a la vista información de dicha foto, todo con animación inclida.

Para que comprendáis mejor este estupendo efecto, mejor echadle un vistazo a la demo:

Una vez visto lo que realmente se puede conseguir, vamos a explicar como lograrlo:

HTML

Lo primero que vamos a hacer es crear la estructura de la galeria con HTML. El código es el siguiente:

[HTML]

Taylor Swift

Taylor Alison Swift (born December 13, 1989)
is an American country pop singer-songwriter
and actress.

Rihanna

Rihanna (born February 20, 1988) is a Barbadian
R&B recording artist and model born in Saint
Michael, Barbados.

Black Eyed Peas

The Black Eyed Peas is a Grammy Award winning hip
hop group that formed in Los Angeles, California
in 1995.

Lady Antebellum

Lady Antebellum is an American country
music group formed in Nashville,
Tennessee in 2006.

Lady Gaga

Lady Gaga is an American recording
artist who rose to fame with her
first two singles «Just Dance» and
«Poker Face».

The Killers

The Killers is an American rock
band from Las Vegas, Nevada, formed
in 2002 who have sold over 16 million
records worldwide.

[/HTML]

CSS

Ahora vamos a darle un poco de estilo, para darle una mejor apariencia gracias a las hojas de estilo:

[CSS]
.galleryContainer
{
width: 1024px;
}
.galleryImage {
background-color:black;
width:325px;
height:260px;
overflow:hidden;
margin:5px;
float:left;
}
.info{
margin-left:10px;
font-family:arial;
padding:3px;
}
.info h2{
color:gray;
}
.info p {
color:white
}
.clear {
clear:both;
margin-top:10px;
}
[/CSS]

jQuery

Por último, tendremos que escribir algo de código jQuery para lograr los efectos deseados:

[javascript]
$(document).ready(function()
{
$(‘.galleryImage’).hover(
function()
{

$(this).find(‘img’).animate(
{ width:100,
marginTop:10,
marginLeft:10
}, 500);

},
function()
{

$(this).find(‘img’).animate(
{width:325,
marginTop:0,
marginLeft:0
},300);

});
});
[/javascript]

Os dejo un enlace para descargar todo el código:

Vía: Xyberneticos