Tutorial - Descrição Surpresa

Hooy~

Passando aqui rapidinho para trazer um tutorial de um efeito muito lindo. Já devem ter visto o efeito que acontece quando vocês passam o mouse na imagem do Gadget "WLC" não é mesmo?! (Se não, vê lá u-ú).

É um dos efeitos mais lindos que já achei, e vim ensinar exatamente esse efeito para vocês, que foi retirado do tumblr Designs for You (créditos a eles o.k.?!). Qualquer coisa, clique aqui para ir para uma preview.

1. Primeiro, vá em "Editar HTML" e pesquise por ']]></b:skin>'

Antes disso, cole:

.dsurprise {position: relative; z-index: 1; width: TAMANHODAIMAGEMpx; 

height: TAMANHODAIMAGEMpx;}

.dsurprise img { width: TAMANHODAIMAGEMpx; 

height: TAMANHODAIMAGEMpx; border:2px solid #CORDABORDA;  position:relative; z-index: 2; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}

.dsurprise:hover img {-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 0px 5px rgba 0, 0, 0, 0.5); box-shadow: 0px 0px 5px rgba 0, 0, 0, 0.5); -moz-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05);}

.dsurprise div.desc {position: absolute; width: 90%; z-index: 1; bottom:0; left: 5px; padding: 8px; background: rgba(0, 0, 0, 0.8); color: white; -moz-border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; opacity: 0; -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); -moz-transition: all 0.5s ease 0.5s; -webkit-transition: all 0.5s ease 0.5s; -o-transition: all 0.5s ease 0.5s; -ms-transition: all 0.5s ease 0.5s; transition: all 0.5s ease 0.5s;}

.dsurprise div.desc a {color:white;}

.dsurprise:hover div.desc {-moz-transform: translate(0, 100%); -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); -o-transform: translate(0, 100%); transform: translate(0, 100%); opacity:1;}

O código é meio estranho, mas, acredite, você não vai precisar mexer em 90% dele.

Mude as partes em itálico, e, para os interessados em mudar a sombra da imagem, mexa nas partes em Negrito (mas sempre os deixe iguais, ou então não funciona). Se quiser tirar a sombra, coloque "0px 0px 0px" ao invés do que está no código.

O resto, aconselho você a não mexer, pois pode dar problema no código.

P.S.: Lembre-se de terminar o código da altura e da largura com "px".

2. Agora adicione um Gadget (HTML/JavaScript) e cole o seguinte código quando quiser usar o efeito:

<div class="dsurprise">
<img src="URL DA SUA IMAGEM AQUI" />
<div class="desc">
ALGO AQUI ALGO AQUI ALGO AQUI ALGO AQUI ALGO AQUI
</div>
</div>

É isso gente. Para os que realmente não conseguiram entender nada dos códigos, a Kaorii postou esse mesmo tutorial de uma forma um pouco mais fácil. Aqui, para quem quiser.