Aprenda a como fazer o efeito continuando a ler a postagem!
1 Vá para Tema > Editar HTML > Clique na caixa de código e aperte Ctrl + F ou F3 > Procure por ]]></b:skin> > Cole o seguinte código acima:
2 Faça as alterações necessárias, como cor de fundo ou da borda.
3 Salve.
4 Vá até a parte do blog onde você quer adicionar o efeito. Cole o seguinte código abaixo:
5 Faça as alterações necessárias.
6 Salve.
div.starlight {
opacity: 1;
}
div.starlight:hover img {
opacity: 0.2;
}
div.starlight img {
opacity: 0.8;
}
div.starlight img:hover {
opacity: 1;
}
div.starlight,
div.starlight img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
<div class="starlight">
<a href="LINK"><img src="LINK_DA_IMAGEM" width="100px"/></a>
<a href="LINK"><img src="LINK_DA_IMAGEM" width="100px"/></a>
<a href="LINK"><img src="LINK_DA_IMAGEM" width="100px"/></a>
</div>
Olá, boa tarde Alan.
ResponderExcluirVi esse efeito aqui, até usaria, mas, ainda insisto em não colocar muitas imagens no blog. Quero evitar futuros problemas com direitos autorais ou coisas do tipo... Também, prefiro colocar o player do YouTube... Não fica lá a melhor coisa... Mas, por hora serve e se encaixa bem na tela até.
Abraços ~ <3
Hello!
ExcluirTambém evito usar imagens, mas é por nunca achar nenhuma que fique legal haha
Sobre o player do youtube, antigamente eu usava sempre, encaixava muito bem com as postagens e servia como uma trilha sonora pro tutorial
See ya~