Tutorial - Menu Crazy

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