Então gente vamos direto ao ponto .
Demo .
Coloque isso no seu CSS.
.img{width:150px;height:150px;border:5px double #bebebe;position:absolute;margin-top:-10px;margin-left:132px;z-index:0.999;}.descricao{width:125px;height:125px;background-color:#fff;margin-top:-145px;z-index:9999999;position:absolute;padding:5px;margin-left:6px;opacity:0;-webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease;-o-transition: all 0.s ease;}.img:hover .descricao{opacity:1;-webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease;-o-transition: all 0.s ease;-webkit-transform:rotate(360deg);-webkit-animation: smallToBig 300ms alternate infinite ease;-moz-animation: smallToBig 300ms alternate infinite ease;}@-webkit-keyframes smallToBig{from {-webkit-transform: scale(1);}to {-webkit-transform: scale(1.1);}}@-moz-keyframes smallToBig{from {-moz-transform: scale(1);}to {-moz-transform: scale(1.1);}}
Modifique como quiser !
Por último vá em Design Layout Adicionar um Gadget HTML/JavaScript
E cole isso :
<div class="img"><img src="http://www.hqdiesel.com/gallery/albums/userpics/10001/normal_620~9_28429.jpg" width="150px" height="150px;"><div class="Descrição">Descrição</div></div>
Onde estiver o nome Descrição é onde vai ficar aquele texto por dentro da foto .
Nenhum comentário:
Postar um comentário