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

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.

<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>
<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>
<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>
<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>
<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>
<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>