Adicionar efeito hover CSS as imagens no bloggerAs imagens trazem vida ao conteúdo do seu blog, mas será que elas realmente atrai seus visitantes?

Adicionar um agradável efeito hover CSS às suas imagens poderiam trazer grandes benefícios ao seu blog.

Recentemente um de nossos usuários nos perguntou: Como adicionar efeito hover CSS as imagens no blogger?

Há muitos efeito hover CSS disponíveis que poderiam ser aplicados com facilidade no seu blog.

Hoje, neste artigo vamos mostrar-lhe como adicionar o efeito hover CSS as imagens no blogger.

O que é mouse hover?

Mouse hover, também conhecido apenas como hover é o efeito que acontece sempre que o mouse é colocado sobre uma determinada área, como hyperlink em uma página web. Esta ação também é chamada de ação de mover o mouse do computador sobre um item específico que causa uma mudança no efeito hover. Normalmente, funciona com a ajuda de CSS e JavaScript.

Como adicionar efeito hover CSS as Imagens no Blogger?

Neste post, iremos adicionar vários efeitos CSS para imagens no blogger por isso vamos listar alguns efeitos hover abaixo que são utilizados e recomendados pela maioria dos web designers:

A primeira coisa que você precisa fazer é ir a Blogger >>Modelo >> Editar HTML e procurar por </b:skin>.

Veja: Como encontrar um código no Blogger Template

Depois de encontrar o código </b:skin>, logo acima dele cole o seguinte código. Lembre-se: Você pode escolher um dos códigos de efeito hover dos seguintes códigos listados abaixo).

Efeito # 1: bump up:

Este efeito é super fácil de implementar, e não causa qualquer tipo de lentidão no seu blog. Ele funciona melhor quando você tem um série de imagens na horizontal. Ele move a imagem um pouco na direção 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 Escala de cinza:

Este efeito hover transforma todas as imagens em tons de cinza sempre que o mouse é colocado sobre uma imagem que pode ser visto em sua cor original. Em outras palavras, ele converte suas imagens em preto e branco, mas em foco mostra 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%);
}

Efeito #3: Efeito Zoom:

.post-body:hover img  {
          -webkit-transform: scale(1.5);
          webkit-transform-origin: 50% 50%;
          -o-transform: scale(1.5);
          -o-transform-origin: 50% 50% 0;
          transform: scale(1.5);
          transform-origin: 50% 50% 0;
        }

Efeito #4: Efeito Giro 360º:

.post-body img{
border: 0;
margin: 0 -30px 0 -30px;
padding: 0;
max-width: 480px;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
.post-body img:hover{
-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

Efeito #5: Efeito transitório para dentro:

.post-body img{
border: 0;
margin: 0 -30px 0 -30px;
padding: 0;
max-width: 480px;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
.post-body img:hover{
           width:auto;
          -webkit-transform: rotateY(-360deg);
          -webkit-transition-duration: 1.00s;
          -moz-transition-duration: 1.00s;
          transition-duration: 1.00s}

Efeito #5: Efeito sépia 

.post-body img {-webkit-transition-duration: .90s;}
.post-body img:hover{-webkit-transition-duration: .90s;
-webkit-filter: sepia(100%);}
Esperamos que este tutorial tenha ajudado você a adicionar alguns efeitos interessantes às suas imagens no blogger. No entanto, se você conhece quaisquer outros efeitos úteis para imagens, então compartilhe conosco nos comentários abaixo.

Postar Comentário

Os comentários deste blog são todos moderados, ou seja, eles são lidos por nós antes de serem publicados.

Não serão aprovados comentários:

1. Não relacionados ao tema do artigo;
2. Com pedidos de parceria;
3. Com propagandas (spam);
4. Com link para divulgar seu blog;
5. Com palavrões ou ofensas a quem quer que seja.

ATENÇÃO: Comentários com links serão excluídos!

Postagem Anterior Próxima Postagem