Toda segunda-feira e quinta-feira tem postagem fresquinha por aqui. Não esquece de conferir!
Por aqui tem resenhas de livros, filmes, séries, dicas e uns assuntos aleatórios também!
Decorativa Bem vindos! Eu sou Juliana, tenho 28 anos, enfermeira e uma nordestina orgulhosa. Criei este espaço para dividir reflexões, ideias e tudo que me inspira no dia a dia. Sintam-se em casa! +++
12/05/2025

Tutorial: Efeito borda + opacidade + filtro em hover

12/05/2025 - 16:00 | Hi honey! Mais um dia, mais um efeito do meu acervo pra vocês! E esse aqui é daqueles que transformam uma imagem simples em um detalhe super charmoso no layout do blog. Mas antes... Como vocês estão? A semana tá voando por aqui, e confesso que tô tentando equilibrar as ideias entre café, estudos e esse vício em ficar procurando novos livros para ler na Amazon! Sábado foi um dia de faxina aqui em casa e domingo - dia das mães - fomos para um dayuse numa pousadinha bem vibes, depois eu trago fotos dela. Agora se você adora ver uma imagem ganhando vida com um simples efeito CSS, vem comigo nesse passo a passo!

Esse efeito serve para aplicar em imagens com a classe grayhover e é ideal pra usar em postagens, ícones personalizados, ou até avatares. Ao passar o mouse, a imagem ganha:

Imagem com efeito

  1. Vá até o painel do Blogger.
  2. Clique em Tema > botão "Editar HTML".
  3. Procure dentro da <head> do código do seu template a tag </style> ou </b:skin> (se já existir), ou crie uma nova seção <style> dentro da <head>:
<b:skin>
<![CDATA[
#grayhover {
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
border: 4px solid #d1d3d2; }
#grayhover:hover {
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
-webkit-filter: grayscale(85%);
filter: grayscale(85%);
border: 4px solid #fbf5ff;
opacity: 0.8;
border-radius: 180px; } 
Outra opção é inserir dentro de uma postagem, como essa que fiz:
  1. Vá em Postagens > Editar ou crie uma nova postagem.
  2. Troque para o modo HTML (no editor).
  3. No início da postagem, adicione:
<style>
#grayhover { -webkit-transition-duration: 0.9s; transition-duration: 0.9s; border: 4px solid #d1d3d2; }
#grayhover:hover { -webkit-transition-duration: 0.9s; transition-duration: 0.9s; -webkit-filter: grayscale(85%); filter: grayscale(85%); border: 4px solid #fbf5ff; opacity: 0.8; border-radius: 180px; }
</style>
E quando for usar o efeito, use pelo HTML com o link da imagem que deseja usar:
<a href="https://example.com" title="Ir para o link"><img class="grayhover" src="Link da Imagem" /></a>
Vou pedir que não saiam da postagem sem dizer o que acharam do tutorial. Me contem se testaram e se deu certo, mas qualquer dúvida comenta aqui que eu posso ajudar vocês, ou me procurem nas redes sociais.


Escrito por #Tags:

2 comentários

  1. Vaneza Nunes23 de maio de 2025 às 11:38

    Fiquei muito feliz em saber que você faz tutoriais xD
    Tô querendo mudar umas coisas no bloguinho, mas não sou especialista em código. Eu achei bem explicado o tutorial, vou testar e volto para contar como ficou. Me pergunto se seria possível fazer com outras cores...

    Garota do 330

    ResponderExcluir
    Respostas
    1. Ju'sReads23 de maio de 2025 às 20:34

      Oi Van! Estou pegando dos arquivos que tinha, mas alguns nem conseguem mais funcionar devido as atualizações. Mas estamos aqui, tentando e se arriscando.

      Excluir


Assinar: Postar comentários (Atom)