Efeito hover css – slide left

Efeito hover css – slide left

Neste tutorial veja como podemos criar um efeito hover – slide left com html e css Responsivo.

Nesta seção, projetaremos uma estrutura simples na tag  <article>,  <div>,  <img> e <h2> para inserir o titulo. 

Usaremos as classes (.box-article, .box e class .card) para dar o formato e estilizar com css.

Essas é a tags e classes que usaremos para criar o nosso hoverlay com html e Css

Vamos Adicionar o HTML

                <article class="box-article">
                  <div class="box card">
                    <img src="uploads/front-end.jpg" alt="Front-end">
                    <h2 class="icon icon-code"> Front-end  <p class="hide"><a href="#" title="Front-end - Developer">Developer</a></p></h2>
                  </div>
                </article><!--Box Article-->

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar e animar o  nosso hoverlay slide left com html e css.

.box-article {

  width: 320px;
  height: 100%;
  margin: auto;
  padding: 5px;
  box-shadow: 1px 0px 1.2px 0px #e3e3e3;
  background-color: #fff;

}

.box {

  position: relative;
  max-height: 330px;
  border-radius: 6px;
  overflow: hidden;
  background: #1a1a1a;

}

.box .hide {
  opacity: 0;
}

.box h2, .box p {

  position: absolute;
  color: #fff;
  z-index: 2;
  width: 100%;
  transition: opacity 0.2s, transform 0.3s;

}

.box h2 {

  font-weight: 500;
  font-size: 22px;
  margin-bottom: 0;
  letter-spacing: 1px;
}

.box p {

  bottom: 0;
  font-size: 15px;
  letter-spacing: 1px;

}


.box p a {

   text-decoration: none;
   color:#ecd200;
   font-weight: bold;

}

.box:hover {

  transition: all 0.4s ease-in-out;

}

.box:hover:before {

  transition: all 0.4s ease-in-out;

}

.box img {

  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.6s ease-in-out;

}

.box img:hover {

  transition: all 0.4s ease-in-out;

}

.box img:after {

  content: "";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;

}

.box img:hover {

  transition: all 0.4s ease-in-out;

}

.card h2 {

  top: 50%;
  text-align: left;
  transform: translate3d(50px, 20px, 0);

}

.card p {

    transform: translate3d(0px, 30px, 0);
    font-size: 24px;
    letter-spacing: 8px;
    transition: all 0.6s ease-in-out;


}

.card:hover h2 {

  transform: translate3d(30px, 20px, 0);

}

.card:hover p {

  opacity: 1;

}

.card img {
  
  filter: opacity(0.7);
  transform: scale(1.10);
  left: 0;

}

.card:hover img {

  filter: opacity(0.3);
  left: -5%;

}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando