Efeito hover no title

 

Yoo mais um tutorial e hoje é efeito é um código enorme e eu quero um post curtinho para vocês, então prestem bastante atenção o tumblr é forrado por efeitos e tem muitos e menos tutoriais, e mais tutoriais para temas, então vão devagar 

para mais informações clique em leia mais~~

Preview TTHY

Amo esse blog do tumblr, entao vai aos créditos a elas *-* 

e ele é enorme preste atenção como eu falei no começo do blog 

.slide-up-boxes {width: 256px; display: inline-block; margin-left: 10px;} 

.slide-up-boxes a {

display: block; 

margin: 0 0 4px 0; 

background: #fff;

height: 104px; 

margin-bottom: 10px; 

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: 104px;

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: -104px;

opacity: 0;}

.slide-up-boxes div 

{position: relative;

color: #fff;

height: 104px;

padding: 0px;

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);} 

 Adicione um gadget de html/javascript e dentro dele cole esse código:

Com texto e imagem:

<div class="slide-up-boxes">

<a href="OLINK">

<h5>

Passe o mouse!

</h5>

<div>

<img src="https://static.tumblr.com/2jiprob/s9Fmes9rb/imagem.png">

            

</div></div>

</a>

Com imagem e imagem:

<div class="slide-up-boxes">

<a href="OLINK">

<h5>

<img src="https://64.media.tumblr.com/tumblr_mes91tinN71ruqdzm.png">

</h5>

<div>

<img src="https://static.tumblr.com/2jiprob/s9Fmes9rb/imagem.png">

</div></div>

</a>