Pedir presupuesto

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

¿Te ha gustado?, Comparte!!

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en whatsapp
Compartir en email

2 comentarios

  1. se ve muy bien este efecto, apenas llevo 3 semanas aprendiendo Jquery… lo tuve que aprender por que entre a trabajar en un lugar donde lo ocupamos XD
    y me enamore de Jquery por su facilidad y gran gama de complementos utiles y asombrosos como este
    Gracias por compartirlo n.n
    SAYO

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es