Como colocar animação ao passar o mouse

Como colocar animação ao passar o mouse

Neste tutorial vamos criar um Efeito de animação ao passar o mouse com html e css.

Nesta seção, projetaremos uma estrutura simples na tag <div>, <figure>, <figcaption> , <i>  e a tag <img> para inserir a imagem. 

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

Vamos Adicionar o HTML

       <div class="box-cards">

           <figure class="card">

               <img src="uploads/arrow.jpg" />
               <figcaption><i class="icon icon-up-open-mini"></i> Arqueiro <i class="icon icon-up-open-mini"></i></figcaption>

           </figure>

       </div><!--Card-->  

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Efeito animado hover.

.box-cards .card figcaption,
.box-cards .card:after {
  position: absolute;
}

.box-cards {
  
  flex-flow: row wrap;
  margin: 50px 0;

}

.box-cards .card {

  width: 270px;
  height: 360px;
  overflow: hidden;
  border-radius: 6px;
  margin: auto;
  box-shadow: 0 5px 5px rgba(0,0,0,0.6);
  transform-origin: center top;
  transform-style: preserve-3d;
  transform: translateZ(0);
  transition: 0.3s;
}

.box-cards .card img {

  width: 100%;
  min-height: 100%;

}

.box-cards .card figcaption {
  
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 1.3em;
    background: none;
    color: #fff;
    transform: translateY(100%);
    transition: 0.3s;
    width: 100%;
    height: 120px;
    line-height: 140px;
    background: linear-gradient(0deg, rgb(0, 62, 42), transparent);
    text-align: center;

}

.box-cards .card:after {
  
  content: '';
  z-index: 10;
  width: 200%;
  height: 100%;
  top: -100%;
  left: -20px;
  opacity: 0.1;
  transform: rotate(45deg);
  background: linear-gradient(to top, transparent, #fff 15%, rgba(255,255,255,0.5));
  transition: 0.3s;

}

.box-cards .card:hover,
.box-cards .card:focus,
.box-cards .card:active {

  box-shadow: 0 8px 10px 3px rgba(0,0,0,0.6);
  transform: translateY(-22px) scale(1.07) rotateX(1deg);

}

.box-cards .card:hover figcaption,
.box-cards .card:focus figcaption,
.box-cards .card:active figcaption{

  transform: none;
}

.box-cards .card:hover:after,
.box-cards .card:focus:after,
.box-cards .card:active:after {

  transform: rotate(25deg);
  top: -30%;
  opacity: 0.15;
}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando