TESTE:EFEITO NA IMAGENS DA EQUIPE

Hooy gente  bom vocês pediram bastante esse tutorial pra mim, por isso vou ensinar como fazer o efeito que eu uso na equipe do blog. E por falar em equipe, espero que estejam gostando das meninas  que vão me ajudar a atualizar o blog 

Live preview

Sobre o tutorial, não tem nada demais. Primeiro vocês precisam criar duas imagens:

                           

A 1° que será a imagem normal           E a 2° que será a imagem em hover

Agora vá no seu HTML e cole esse código acima de  ]]></b:skin>

.slide-up-boxes {width: 133px; display: inline-block; margin-left: 6px;}
.slide-up-boxes a {
display: block;
margin: 0 0 0px 0;
background: #fff;
height: 98px;
margin-bottom: 5px;
overflow: hidden;
text-decoration: none;
box-shadow: 0 5px 2px -2px rgba(0,0,0,0.11);}
.slide-up-boxes h5 {
color: #937560;
text-align: center;
height: 109px;
text-shadow: 1px 1px 0px #eee;
letter-spacing: 5px;
text-transform: uppercase;
font: normal 11px/104px Arial;
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
.slide-up-boxes a:hover h5 {
margin-top: -114px;
opacity: 0;}
.slide-up-boxes div
{position: relative;
color: #fff;
height: 114px;
padding: 5px;
opacity: 0;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.4s linear;
-moz-transform: rotate(6deg);
-moz-transition: all 0.4s linear;
-o-transform: rotate(6deg);
-o-transition: all 0.4s linear;
text-decoration: none;}
.slide-up-boxes a:hover div {opacity: 1;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);} 

Visualize se estiver tudo ok (sem erros no HTML), salve.
Agora toda vez que quiser utilizar esse efeito use isso:

<div class="slide-up-boxes">
<a href="URL DO SITE">
<h5>
<img src="URL DA 1° IMAGEM" />
</h5>
<div>
<img src="URL DA 2° IMAGEM" />
</div></a></div>

Fácil né gente?! Espero que tenham gostado (:

Bye Bye ~