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! 05/05/2025 - 14:56 | Oi, pessoal! Espero que vocês estejam bem — e se cuidando, porque a rotina anda puxada pra todo mundo, né? Aqui as coisas continuam na correria: trabalho, projetos paralelos, uma xícara de café atrás da outra e aquele eterno desafio de organizar tempo pra tudo o que a gente gosta de fazer.
Ultimamente tenho tentado separar uns minutinhos pra mim no meio da bagunça do dia a dia... Sabe aquela leitura que você começa, para, depois tenta voltar e acaba esquecendo tudo? Pois é, sou exatamente essa pessoa no momento! 😅 Estou tentando retomar um livro que tava encostado há meses, e confesso que ler antes de dormir tem me ajudado a desconectar um pouco das telas.
E vocês, estão lendo algo interessante? Ou testando alguma ideia nova nos seus blogs?
Bom, papo vai, papo vem... mas como prometido, hoje trouxe mais um pedacinho do meu acervo de códigos HTML — daqueles simples, mas super úteis pra quem curte personalizar o visual do blog com a própria mão na massa. Vamos ao que interessa?
Dessa vez, o destaque vai para um efeito visual bem interessante que pode deixar sua galeria de imagens ou seus links visuais mais modernos e interativos. O código que vou mostrar hoje é ideal para quando você quer aplicar um efeito de destaque sutil ao passar o mouse sobre imagens.
Se caso o efeito não funcionar aqui na postagem, vocês podem visualizar ele aqui em efeito {3} - modelo 1.
- Vá até o painel do Blogger.
- Clique em Tema > botão "Editar HTML".
- 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>:
<style>#opaciline a img{width:50px;height:50px;display:inline;margin-right:2px;margin-left:1px;margin-top:1px;margin-bottom:1px;padding: 3px;border: 1px solid #d1d3d2;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;-ms-transition: all 0.5s ease-out;transition: all 0.5s ease-out; }#opaciline a:hover img{outline: solid 1px transparent;opacity: 0.5;outline-offset: -20px; }</style>
<div id="opaciline"><a href="/" title="Nome do Link"> <img src="Link da Imagem" /></a> </div>
Nenhum comentário
Postar um comentário