Olá Pessoal, trago para vocês um efeito muito fofo que pode ser utilizado tanto nas
autoras quanto nos afiliados do blog. Créditos x
Primeiro Você precisa de duas imagens
 |
| Imagem Normal |
 |
| Imagem em hover |
No html de seu blog, coloque o código abaixo logo acima de ]]> </ b: skin>
.slide-up-boxes {width: 133px; display: inline-block; margin-left: 6px;}.slide-up-boxes a {display: block;margin: 0 0 0px 0;background: #fff;height: 98px;margin-bottom: 5px;overflow: hidden;text-decoration: none;box-shadow: 0 5px 2px -2px rgba(0,0,0,0.11);}.slide-up-boxes h5 {color: #937560;text-align: center;height: 109px;text-shadow: 1px 1px 0px #eee;letter-spacing: 5px;text-transform: uppercase;font: normal 11px/104px Arial;opacity: 1;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;}.slide-up-boxes a:hover h5 {margin-top: -114px;opacity: 0;}.slide-up-boxes div{position: relative;color: #fff;height: 114px;padding: 5px;opacity: 0;-webkit-transform: rotate(6deg);-webkit-transition: all 0.4s linear;-moz-transform: rotate(6deg);-moz-transition: all 0.4s linear;-o-transform: rotate(6deg);-o-transition: all 0.4s linear;text-decoration: none;}.slide-up-boxes a:hover div {opacity: 1;-webkit-transform: rotate(0);-moz-transform: rotate(0);-o-transform: rotate(0);}
Para visualizar em seu blog, coloque o código abaixo no gadget HTML/JAVA SCRIPT
<div class="slide-up-boxes">
<a href="URL DO SITE">
<h5>
<img src="URL DA 1° IMAGEM" />
</h5>
<div>
<img src="URL DA 2° IMAGEM" />
</div></a></div>
<div class="slide-up-boxes">
<a href="URL DO SITE">
<h5>
<img src="URL DA 1° IMAGEM" />
</h5>
<div>
<img src="URL DA 2° IMAGEM" />
</div></a></div>
Kissus
Nenhum comentário:
Postar um comentário
- Este espaço é todo seu. Tire suas dúvidas!
- Por favor, Não faça algum request pelos comentários,
para isso serve a Ask.
- Se não gostou de algo, não use palavras baixas. Ninguém precisa se rebaixar tanto para expressar uma opinião.
- Leio todos os comentários e retribuo todos.
-Thanks