Descrição Hover

mutable-html:

Esse efeito é basicamente o mesmo usado no Menu Hover (:

Veja aqui.

Cole isso no css, depois de <style>:
#texto {width: 200px; height: 250px; display: block; background: #202020; opacity: 0.9; color: #fff; -webkit-transition-duration: .90s; margin-top: -0px; overflow: hidden; padding:5px;  margin-top: 20px; margin-left: 17px; }

.texto {font-family: "verdana"; font-size: 10px;  text-align: justify; margin-top: 60px; margin-left: 3px; }

#b1 #b2{opacity: 0;  -webkit-transition-duration: .80s; -o-transition-duration: .80s; -moz-transition-duration: .80s; -ms-transition-duration: .80s; }
#b1:hover #b2{opacity: 1.0; -webkit-transition-duration: .80s; -o-transition-duration: .80s; -moz-transition-duration: .80s; -ms-transition-duration: .80s; }
Vê as medidas negritadas? Elas você muda de acordo com o tamanho da imagem.

Eu por exemplo, usei uma imagem com 245px de largura (width) e 300px de altura (height), então, no css, eu coloquei medidas um pouco menores para que a descrição ficasse centralizada. Edite essa parte com cuidado ok?

Agora cole isso aonde você quer que apareça:
<div id='b1'>
<img src="URL DA IMAGEM" />
<div id="b2">
<div id="texto">
<div class="texto">
SUA DESCRIÇÃO AQUI 

</div></div></div>
</div></div></div>
Como sempre, tudo em negrito você pode/deve mudar (:

Você também pode por uma imagem ou links dentro também se quiser.

Não foi inventado por mim, mas os códigos são meus. Se usar, por favor credite, ok? (: obg <3

9 ♥ Reblog