Cajas con animaciones usando jQuery

Con esta animación realizada con JQuery quedará nuestro blog totalmente profesional,

La web de Compartidismo nos muestra como hacerlo.

Lo primero y antes de nada :

Demostración

Nota:
Si ninguna de estas opciones funcionan, tenemos que hacer el cambio de pantalla manual

Puedes ver en este post como lo hacemos paso a paso

  Insertar los códigos:

Los primer es insertar el código JQuery en nuestra plantilla:

Nos dirigimos a Tema > Editar HTML y buscamos </head>

Justo antes pegamos el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

Una vez hecho esto justamente siguiendo el código añadimos las animaciones

:

<script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ //Deslizamiento Vertical $('.boxgrid.slidedown').hover(function(){ $(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300}); }, function() { $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300}); }); //Deslizamiento Horizontal $('.boxgrid.slideright').hover(function(){ $(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300}); }, function() { $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300}); }); //Deslizamiento en diagonal $('.boxgrid.thecombo').hover(function(){ $(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300}); }, function() { $(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300}); }); //Deslizamiento parcial (muestra una parte del fondo) $('.boxgrid.peek').hover(function(){ $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160}); }); //Deslizamiento que muestra completa la leyenda $('.boxgrid.captionfull').hover(function(){ $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160}); }); //Deslizamiento que muestra parcialmente la leyenda $('.boxgrid.caption').hover(function(){ $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160}); }); }); //]]> </script>

Después de esto añadimos el CSS

Nos vamos a Tema > Personalizar > Añadir CSS

Pegamos el siguiente código

.boxgrid{ width: 325px; /*ancho de la imagen*/ height: 260px; /*alto de la imagen*/ margin:5px; float:left; background:#161613; border: solid 2px #8399AF; overflow: hidden; position: relative; } .boxgrid h3 { padding: 0; margin-left: 10px; color: #fff; } .boxgrid img{ position: absolute; top: 0; left: 0; border: 0; } .boxgrid p{ padding: 0 16px; /*usar solo si se pone en una sección*/ color:#afafaf; font-weight: bold; font-size: 12px; } .boxgrid a { margin: 0; padding: 0; text-decoration: underline; } .boxcaption{ float: left; position: absolute; background: #000; height: 100px; width: 100%; opacity: .8; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); top: 0; left: 0; } .captionfull .boxcaption { top: 260; left: 0; } .caption .boxcaption { top: 220; left: 0; }

 Finalmente lo que falta es el HTML, con las imágenes, textos y enlaces que queremos mostrar, ya sea en una sección de la plantilla, por ejemplo debajo del header, o en una página estática.

Este es el HTML de los 6 ejemplos de la demostración y que puse en una página estática, nótese que agregue el atributo: padding a la etiqueta p, ya que si no tiene atributos cuando se agrega en el editor, desaparecerá y habrá problemas para que se apliquen los estilos. Si lo vas a poner ahí, será necesario quitar del CSS la linea que corresponde al padding,  para dicha etiqueta y que puse de verde.

<!--Deslizamiento que muestra completa la leyenda--><div class="boxgrid captionfull"> <img alt="" src="URL DE LA IMAGEN" /> <div class="cover boxcaption"> <h3>Titulo de la imagen</h3> <div style="padding-left: 10px;"> Texto aquí<br /> <a href="#" target="_BLANK">Texto Enlace</a></div> </div> </div> <!--Deslizamiento que muestra parcialmente la leyenda--><div class="boxgrid caption"> <img alt="" src="URL DE LA IMAGEN" /> <div class="cover boxcaption"> <h3>Título</h3> <div style="padding-left: 10px;"> Texto aquí<br /> <a href="#" target="_BLANK">Texto enlace</a></div> </div> <!--Deslizamiento Horizontal--><div class="boxgrid slideright"> <img alt="" class="cover" src="URL DE LA IMAGEN" /> <h3>Título</h3> <div style="padding-left: 10px;"> Texto aquí<br /> <a href="#/" target="_BLANK">Texto enlace</a></div> </div> <!--Deslizamiento en Diagonal--><div class="boxgrid thecombo"> <img alt="" class="cover" src="URL de la imagen" /> <h3>Título</h3> <div style="padding-left: 10px;"> Texto aquí<br /> <a href="#" target="_BLANK">Texto enlace</a></div> </div> <!--Deslizamiento Vertical--><div class="boxgrid slidedown"> <img alt="" class="cover" src="URL de la imagen" /> <h3>Título</h3> <div style="padding-left: 10px;"> Arte, Música, Mundo<br /> <a href="#" target="_BLANK">Texto enlace</a></div> </div> <!--Deslizamiento parcial que muestra una parte del fondo--><div class="boxgrid peek"> <a href="#" target="_BLANK"><img src="URL DE LA IMAGEN PEQUEÑA" /></a><a href="#" target="_BLANK"><img alt="" class="cover" src="URL de la imagen visible" /></a> </div>