Efeitos de transições ao passar o mouse

Efeitos de transições ao passar o mouse

Neste tutorial vamos criar  Efeitos de transições ao passar o mouse com html e css.

A animação acontece quando o usuário passa o mouse sobre o item html formatado com CSS.

Nesta seção, projetaremos uma estrutura simples na tag <figure>, <img>, <figcaption>, <ul> , <li> , <i> e a tag <href> para inserir o link de destino da Rede Social. 

Essas são as tags que usaremos para criar o nosso Efeito de transição ao passar o mouse .

Vamos Adicionar o HTML

    <figure class="card">
     
      <img src="uploads/foto.jpg" alt="Front-end" title="Front-end" />
      <figcaption>
       
        <h2>Front-end</h2>
        <ul class="links">
          <li> <a href="#"> <i class="icon icon-facebook"></i> Facebook</a></li>
          <li> <a href="#"> <i class="icon icon-instagram"></i> Instagram</a></li>
          <li> <a href="#"> <i class="icon icon-twitter"></i> Twitter</a></li>
          <li> <a href="#"> <i class="icon icon-youtube"></i> Youtube</a></li>
        </ul>

      </figcaption>
    </figure>

Vamos Adicionar o CSS

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

figure.card {

  font-family: 'open_sansregular';
  position: relative;
  overflow: hidden;
  margin: auto;
  min-width: 230px;
  max-width: 315px;
  max-height: 230px;
  width: 100%;
  color: #ffffff;
  text-align: left;
  font-size: 16px;
  background-color: #000000;
  border-radius: 8px;

}

figure.card:after {

  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  right: -20%;
  content: '';
  background-color: rgba(4, 104, 232, 0.66);
  -webkit-transform: skew(20deg) translateX(-75%);
  transform: skew(20deg) translateX(-75%);
  -webkit-transition: all 0.50s ease;
  transition: all 0.50s ease;

}

figure.card * {

  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;

}

figure.card img {

  max-width: 100%;

}

figure.card figcaption {

  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 20px;

}

figure.card h2,
figure.card .links {

  width: 100%;
  margin: 0;
  padding: 0;

}

figure.card h2 {

  line-height: 1.3em;
  font-weight: bold;
  font-size: 1.3em;
  margin-bottom: 12px;

}

figure.card .links {
  
  font-size: 1em;
  letter-spacing: 3px;
  font-weight: bold;
  margin: 0;
  padding: 0;

}

figure.card .links li {
  -webkit-transform: translateX(-40px);
  transform: translateX(-40px);
  opacity: 0;
  list-style: none;
}

figure.card a {
  padding: 2px 0;
  display: block;
  color: #ffffff;
  text-decoration: none;
}

figure.card a:hover {
  color: #ffef00;
}

figure.card:hover:after,
figure.card.hover:after {
  -webkit-transform: skew(20deg) translateX(0%);
  transform: skew(20deg) translateX(0%);
}

figure.card:hover img,
figure.card.hover img {
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  opacity: 0.5;
}

figure.card:hover li,
figure.card.hover li {
  opacity: 1;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

figure.card:hover li:first-child,
figure.card.hover li:first-child {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

figure.card:hover li:nth-child(2),
figure.card.hover li:nth-child(2) {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

figure.card:hover li:nth-child(3),
figure.card.hover li:nth-child(3) {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

figure.card:hover li:nth-child(4),
figure.card.hover li:nth-child(4) {
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando