Como usar o Hover em imagem no CSS

Como usar o Hover em imagem no CSS

Neste tutorial vamos criar um Efeito Hoverlay na imagem com html e css.

Nesta seção, projetaremos uma estrutura simples na tag <div>, <h1> e a <p> para inserir o texto de descrição. 

Essas são as tags que usaremos para criar o nosso Efeito Hoverlay na imagem .

Vamos Adicionar o HTML

      <div class="card card-bg">
                  
          <div class="overlay">
             <h1>Front-end</h1>
             <p>Loop Nerd - códigos Html e css prontos para agilizar o seu tempo</p>
          </div>

      </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Efeito hoverlay na imagem.

.card{
  
  width: 250px;
  height: 320px;
  overflow:hidden;
  display: block;
  margin: auto;
  position:relative;
  background-size:cover;
  background-position:center center;

}

.overlay{

  position:absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  background: rgba(1,1,1,0.7);
  transition-duration: 0.3s;
  opacity: 0;

}

.overlay > h1{
  
  text-transform: uppercase;
  color: white;
  padding: 110px 0 0 0;
  font-family: 'open_sansregular';
  font-weight: 500;
  font-size: 1.2em;
  margin: 0 auto;
  width: 80%;
  transition-duration: 0.6s;
  padding-bottom: 10px;

}

.overlay > p{
  
  color: white;
  width: 80%;
  margin: 0 auto;
  font-family: 'open_sansregular';
  font-weight: 300;
  font-size: 0.9em;
  padding-top:8px;

}


.overlay:hover{ opacity: 1; }

.overlay:hover > h1 { padding: 100px 0 5px 0; }

.card-bg { background-image: url('../uploads/card.jpg'); }

Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando