Efeito CSS3 - Inside Out !

 

Olá Bloggers :)

Tutorial saindo do forno agorinha, éle é bem legal usado em imagens, pode ser para os afiliados, equipe ou o que quiser :)

Visualizem ele aqui

  Gostaram ?

Então continuem lendo :)

Aperte F3 ou CTRL+F e Procure por ]]></b:skin>.
Logo acime cole o código abaixo

#linked {
background: url(http://25.media.tumblr.com/tumblr_mcaon9zXd41r3rnp2o1_250.png) no-repeat;
width: 160px;
height: 160px;
display: inline-block;
box-shadow: inset 0 0 0 80px rgba(0, 0, 0, 0.4);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#linked:hover {
box-shadow: inset 0 0 0 8px rgba(0, 0, 0, 0.4);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

Altere se quiser, apenas onde está em negrito.

Para usar é só adicionar um gadget HTML/Jasvascript com o código abaixo:

<div id="linked"></div>