Estilizando Hover em imagens

Criando um efeito simples, mas que tem uma carinha bem legal e que vai dar uma vida para o seu site ou projeto.

Exemplo de como vai ficar:

Titulo do curso

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Saiba mais

 

Aconselho sempre indentar bem o nosso HTML para ficar mais fácil de altera-lo ou uma outra pessoa dar suporte.

  1. Vamos criar uma div chamada “efecthover” que irá receber o efeito hover.
  2. Dentro dessa div iremos receber o conteúdo que irá aparecer ao passar o mouse.
  3. O conteúdo que ficará escondido receberá á div chamada “contenthover”.
<div class="efecthover">
  <img src="http://micheldeziderio.com.br/wp-content/uploads/2018/03/javascript.png">
  <div class="contenthover">
    <h1>Titulo do curso</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    <a href="javascript:void(0);">Saiba mais</a>
  </div>
</div>

Dentro da classe você pode colocar quanto textos ou icones, esse efeito é um leque aberto para trabalhar da forma que preferir.

O próximo passo é aonde vamos dar o estilo as classes criadas no HTML acima.

Estilo da div, especificando tamanho e tirando forçando a não ter barra de rolagem na mesma.
    .efecthover {
        position: relative;
        width: 400px;
        overflow: hidden;
    }
Estilo da imagem, especificando atributos:
  • Tamanho da imagem no width de 100% ou seja para ela se adequa ao tamanho da div ou box.
  • Border-radius:2px – Deixando as bordas arredondadas e colocando.
  • Os outros atributos é para transição da imagem retonará quando sair com o mouse de cima da mesma.
    .efecthover > img {
        width: 100%; 
        border-radius: 2px;
        -webkit-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
        -moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
        -ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
        -o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
        transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
    }
Estilo da imagem em hover ou seja o que acontecerá ao passar o mouse, especificando atributos:
  • Escala de zoom que a imgem vai ter quando passar o mouse.
    .efecthover:hover > img {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
    }
Estilo da div de conteúdo antes de passar o mouse, especificando atributos:
  • position:absolute – está dizendo que o efeito irá se pocionar no canto superior esquerdo para a direita.
  • Tamanho do box em height já que o box foi catalogado como 100% de width já pela imagem a cima.
  • top:0 e left:0 – Que o efeito se iniciará de cima para baixo e da esquerda par direita até preencher o campo da imagem por inteiro.
  • Opacity:0 – Está dizendo para ele se inicar trasparente.
  • border-radius:2px – Deixando a borda arrendondada para deixar conforme o da imgem.
  • text-align:center – Centralizando o texto dentro da div.
  • Paddding:30px – Atribuindo um espacamento em escala de 30px de cada borda do efeito para dentro. Outro atributos de transição.
    .efecthover .contenthover{
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;    
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);    
        border-radius: 2px;
        text-align: center;
        padding: 30px;
        -webkit-transition:     all .8s cubic-bezier(.190, 1.000, .220, 1.000);
        -moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
        -ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
        -o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
        transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); 
    }
Estilo da div de conteúdo hover, especificando atributos:
  • Opacity:1 – É aonde ele força o efeito do conteúdo a aparecer quando passar o mouse.
  • box-shadow: inset 0 0 100px 50px rgba(0,0,0,.5) – É aonde ele ganha um fundo preto com a opacidade de 0.5 e deixando aparaceer a imagem de fundo.
    .efecthover:hover .contenthover {
        opacity: 1;
        box-shadow: inset 0 0 100px 50px rgba(0,0,0,.5);
    }
Estilo do texto normal <p>, especificando atributos:
  • color:#fff – É aonde colocamos as letras desse parágrafo na cor branca.
  • font-size: 20px – É aonde estaremos dizendo que o tamanho do texto do parágrafo será de 16px.
    .efecthover .contenthover p {
        color: #fff;
        font-size: 20px;
    }
Estilo do texto normal <h1>, especificando atributos:
  • color:#fff – É aonde colocamos as letras desse <h1> “Sempre chamados quando há um titulo” na cor branca.
    .efecthover .contenthover h1  {
        color: #fff;
    }
Estilo do link ou botão, especificando atributos:
  • display:block – Onde formçamos ele aparecer sempre que passar o mouse em cima da imagem.
  • width:150px- É aonde damos o tamnho para ele.
  • background: #0b78d2 – Aqui damos a cor de fundo.
  • border: 1px solid #0b78d2 – É o tamanho e cor da borda do link ou botão.
  • border-radius:4px – Nesse atributo ele ganha um arrendondamento de 4px.
  • color:#fff – É aonde colocamos as letras desse link ou botão na cor branca.
  • text-decoration: none – Tira todos os efeitos de link como sublinhado e cor dsecudndaria “caso ele seja mesmo um link e não um botão”.
  • text-align:center – Centralizando o texto dentro do link.
  • padding: 10px 15px – Aqui ele ganha um espaçamento interno de 10px na parte superior e infeior, 15px seria espaçamento esquer e direito do texto centralizado.
  • margin:16px auto 0 – É aonde ele ganha um espacamento externo, que faz com que ele fique 16px longe de qualquer outro conteúdo dentro do efeito, deixando ele separado.
    .efecthover .contenthover a {
        display: block;
        width: 150px;
        background: #0b78d2;
        border: 1px solid #0b78d2;
        border-radius: 4px;
        color: #fff;
        text-decoration: none;
        text-align: center;
        padding: 10px 15px;
        margin: 16px auto 0;
    }

Download dos arquivos do exemplo:

CLIQUE AQUI


Compartilhe este artigo com seus amigos!

WebLink Hospedagem cPanel

AmazingWP - Tema Espetacular para WordPress