Efeito nas descrições hover

OIIIE meus amores hoje trouce a você um tuto bem legal vamos lá:

Click aqui para ver o feito

Como sempre vá em seu HTML e procure por :
]]></b:skin>

E acima da tag cole :

.imagem {-webkit-border-radius: 360px;  -moz-border-radius: 360px;  border-radius: 360px; z-index:1000; -webkit-transition: opacity 0.9s linear;-moz-transition: opacity 0.9s linear;-webkit-transition: all 0.9s ease-in-out;-moz-transition: all 0.9s ease-in-out;-o-transition: all 0.9s ease-in-out; }.caixinha { background: #COR DO BG; padding: 3px; margin-right:3px; margin-bottom:3px; text-align:left; overflor:hidden; -webkit-transition: opacity 0.9s linear;-moz-transition: opacity 0.9s linear;-webkit-transition: all 0.9s ease-in-out;-moz-transition: all 0.9s ease-in-out;-o-transition: all 0.9s ease-in-out; -webkit-border-radius: 360px;  -moz-border-radius: 360px;  border-radius: 360px;  width:235px; height:235px;}.descrip6 { text-align:center; overflor:hidden; -webkit-transition: opacity 0.9s linear;-moz-transition: opacity 0.9s linear;-webkit-transition: all 0.9s ease-in-out;-moz-transition: all 0.9s ease-in-out;-o-transition: all 0.9s ease-in-out;  -webkit-border-radius: 190px 190px 190px 0px;  -moz-border-radius: 190px 190px 190px 0px;  border-radius: 190px 190px 190px 0px; opacity:0; z-index: 400; -webkit-transition:all .4s linear;-moz-transition:all .4s linear;transition:all .4s linear; margin-top: 5px;  width:155px; height:155px; margin-bottom:0px; background:#CORDOBG; margin-left:40px; padding:25px;}.caixinha:hover .descrip6 {margin-left:190px; opacity:1; z-index:1000; margin-top:-353px;}

Espero que gostem !

Créditos : For You Blogger &  Mutable Html