♦ Tutorial ~ Imagem que se Fecha

Fashion Monsterrrrr....

viciei na nova música da Kyary Pamyu Pamyu.

Ops já estou no post. Oi oi gente.

Hoje trago mais um pedido que a Rarissa do blog Colors and Promisses me pediu (na verdade ela perguntou).

O tutorial é o mesmo que eu uso no gadget de divulgação dos blogs.

Exemplos

Normal

Hover

  Como perceberam as imagens ficam com opacidade, normal e juntinhas. E quando passa o mouse elas ficam arredondadas e com a cor normal. Então vamos lá aprender

No seu painel vá em:

Layout ► Adicionar um Gadget ► HTML/JavaScript

E cole esse código

<a href="LINK DO BLOG" target="_blank"><img src="URL DA IMAGEM" border="0" class="equipe" title="NOME DO BLOG"/></a>

<style>
.equipe {
-webkit-transition: all 1.0s linear;-webkit-transition: all 1.0s linear;-moz-transition: all 1.0s linear;transition: all 1.0s linear; /* Efeito fade */
-webkit-box-shadow: 0 0 .3em #000000; /* Sombra */
filter:alpha(opacity=65); /* Opacidade */
-moz-opacity:0.65;
opacity:0.65;
cursor: crosshair; /* Cursor */
}
.equipe:hover {
-webkit-box-shadow: 0 0 .3em #000000; /* Sombra */
-webkit-transition: all 1.0s linear;-webkit-transition: all 1.0s linear;-moz-transition: all 1.0s linear;transition: all 1.0s linear; /* Efeito fade */
-webkit-border-radius: 72px; /* Bordas arredondadas */
-moz-border-radius: 72px;
border-radius: 72px;
filter:alpha(opacity=100); /* Opacidade */
-moz-opacity:1.0;
opacity:1.0;
cursor: crosshair; /* Cursor */
}
</style>

Repita esse primeiro código sempre que precisar adicionar um novo blog.

Esse código maior é o efeito da imagem, não mexa nele, nem apague e nem esqueça de coloca-lo

Bem essa é a forma mais fácil.

Espero que goste.