Como colocar efeitos nas imagens do blogger
No artigo de hoje, vou compartilhar um código CSS que deixará as imagens que você desejar um belo efeito ao passar o mouse sobre elas. Ao implementar essa funcionalidade, seu ficará mais bonito e fará com que ele se diferencie dos demais. Sendo assim, vamos para o tutorial.
COMO INSTALAR EFEITOS NAS IMAGENS AO PASSAR O MOUSE:
Para aplicar o efeito é algo muito fácil a se fazer.
1. Vá para o painel do blogger > Editar HTML e pesquise por: ]]></b:skin> e acima dessa tag, cole o seguinte código CSS:
#efek-gambar a img:hover { -webkit-filter:none; /*Returns to default*/; }
#efek-gambar a img.brightness:hover { -webkit-filter:brightness(0); }
.blur { -webkit-filter:blur(3px); }
.contrast { -webkit-filter:contrast(160%); }
.grayscale { -webkit-filter:grayscale(100%); }
.huerotate { -webkit-filter:hue-rotate(180deg); }
.invert { -webkit-filter:invert(100%); }
.opacity { -webkit-filter:opacity(50%); }
.saturate { -webkit-filter:saturate(3); }
.sepia { -webkit-filter:sepia(100%); }
.brightness { -webkit-filter:brightness(0.25); }
Ao criar uma postagem, deve-se colocar o link da imagem dentro das " ", como demostrado abaixo:
<div id="efek-gambar">
<img class="blur" src="aqui vai o link da imagem" />
</div>
Para se alterar o efeito, você deve mexer no campo <img class ="aqui vai o nome do efeito" src....
Para que os efeitos funcionem, eles devem estar em inglês. Sendo assim, aqui vãos os nomes dos efeitos em inglês e como as imagens ficarão:
Blur
Contrast
Grayscale
Huerotate
Invert
Opacity
Saturate
Sepia
Brightness