Imagens do blogue com efeito no Blogger/Blogspot

 Olá pessoal,
Hoje vou ensinar como por as imagens com efeito quando o mouse em cima na imagem, usando o CSS3.
Primeiro de tudo, procure por:

]]></b:skin>

E acima dele cole o seguinte código:


.images{
float:left;
margin-left:-20px;
margin-right:-20px;
margin-top:10px;
-webkit-transform:scale(0.6);/*Tamanho inicial da imagem quando carrega a página*/
-webkit-transition-duration: 0.5s;/*Tempo que demora para a imagem ir de pequeno para grande*/
}
.images:hover{
-webkit-transform:scale(0.8);/*Quando em cima das imagens o tamanho será aumentado*/
-webkit-box-shadow:0px 0px 40px #ccc;
}
.images .layer{
width: 100%;
height: 100%;
background-color:#000;
position: absolute;
opacity:0.5;
-webkit-transition-duration: 0.8s;
}
#image1:hover .layer{
width:0%;
}
E agora,para por as imagens com efeito,faça assim:

<div class="images" id="image1">
<div class="layer">
</div>
<img src="URL_DA_IMAGEM" /></div>

E pronto,resultado final:

E pronto! As suas imagens estão com efeito apenas no Safari e no Chrome!
Créditos: WebDesignersDesk

Tags: Blogger,Hacks