As imagens dão vida ao conteúdo, mas elas realmente atraem seus visitantes? Adicionar um bom efeito de foco CSS às suas imagens pode trazer benefícios de engajamento para o seu blog. Recentemente, um de nossos usuários nos perguntou como adicionar o efeito de foco CSS às imagens no blogger? Existem muitos efeitos de foco CSS disponíveis que podem ser aplicados com facilidade ao seu site do blogger. Hoje, neste artigo, mostraremos como adicionar efeito de foco CSS em imagens no blogger.
O que é passar o mouse?
Um mouse hover, também conhecido como apenas hover que aciona um mesmo sempre que um mouse é colocado sobre uma determinada área, como um hiperlink em uma página da web. Essa ação também é chamada de ação de mover o mouse do computador sobre um item específico que causa uma alteração no efeito ao passar o mouse. Normalmente, funciona com a ajuda de CSS e JavaScript.
Como adicionar efeitos CSS Hover a imagens no Blogger?
Nesta postagem, adicionaremos vários efeitos CSS às imagens no blogger, por isso listamos todos os efeitos de foco abaixo que são usados e recomendados pela maioria dos web designers:
A primeira coisa que você precisa fazer é ir para Blogger > > Modelo >> Edite o HTML e procure a tag ]]></b:skin> . Depois de encontrar a tag ]]></b:skin> , logo acima dela cole o seguinte trecho de código. Lembre-se: Cole qualquer efeito dos seguintes códigos listados abaixo).
Efeito #1: Bump Up:
Este efeito é super fácil de implementar e nem causa nenhum tipo de lentidão no seu blog. Isso funciona melhor quando você tem uma série de imagens no item horizontal. Ele move a imagem um pouco para cima quando o mouse é colocado sobre ela.
.post-body img {
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
.post-body img:hover {
margin-top: 2px;
}
Efeito #2: Efeito Tons de Cinza:
Este efeito transforma todas as suas imagens em tons de cinza e sempre que um mouse é colocado sobre uma imagem ela pode ser vista em sua cor original. Em outras palavras, ele converte suas imagens em preto e branco, mas ao passar o mouse as mostra em sua cor original.
.post-body img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
/* Firefox 3.5+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(100%);
/* Chrome 19+ & Safari 6+ */;
}
.post-body img:hover {
filter: none;
-webkit-filter: grayscale(0%);
}
Esperamos que este tutorial possa ter ajudado você a adicionar alguns efeitos interessantes de foco às suas imagens no blogger. No entanto, se você tiver outros efeitos de foco úteis para imagens, compartilhe conosco nos comentários abaixo.
Tags:
INTERNET