Efeito CSS3 nas Imagens do Blogger

Neste post irei falar aqui no DicasHot a respeito de como colocar nas imagens do seu blog um efeito muito interessante para que suas postagens fique com um certo efeito realista e mais moderna.

O efeito da qual iremos colocar nas imagens do blogger um efeito semelhante a um zoom.

Siga-nos no twitter:
Seguir @DicashotOficial

Inserindo o código no blogger

1º – Acesse o painel do seu Blog e clique na aba "Design";

2º – Depois clique no Botão "Editar HTML";

3º – Em seguida segure as teclas CTRL+F e procure por:

]]></b:skin> 

4º – E ACIMA dele cole o seguinte código:

.post-body img {border: 1px solid #ccc;-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-o-transform: scale(0.8);-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;}
.post-body img:hover {-webkit-transform: scale(1.0);-moz-transform: scale(1.0);-o-transform: scale(1.0);opacity: 1.0;-moz-box-shadow: 0 4px 16px rgba(0,0,0,0.2);-ms-box-shadow: 0 4px 16px rgba(0,0,0,0.2);-webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.2);box-shadow: 0 4px 16px rgba(0,0,0,0.2);border-image: initial;}

Feito isto e salvar e pronto!!!

Gostou deste post?

Se inscreva e receba nossas atualizações por e-mail: