Overlay Efeito Slide Right

Overlay Efeito Slide Right

Veja neste artigo veremos como criar um Overlay Efeito Slide Right estilizado com html css.

Nesta seção, projetaremos uma estrutura simples na tag <article>,<img>, <div>, <h2> e a <href> para inserirmos o link de destino. 

Essas são as tags que usaremos para criar o nosso Overlay com efeito slide Right com css.

Vamos Adicionar o HTML

  <article class="overlay">
    
    <img src="uploads/foto.jpg" alt="foto.jpg">
    <div class="slide-right">
      <h2 class="title-hover"><a href="#" title="Leia mais"> Leia mais </a></h2>
    </div>

  </article>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Overlay efeito Right.

.overlay {

  margin: auto;
  width: 400px;
  height: 250px;
  position: relative;
  color: white;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.50);

}

.overlay img {

  width: 100%;
  height: 100%;
  transform: scale(1);
  transition: transform 0.5s;

}

.title-hover a { text-decoration:none; color:#ffffff; }

.title-hover {

  font-weight: 300;
  font-size: 16px;

}

.title-hover {

  margin: 0;

}

.slide-right {

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(164, 112, 74, 0.73);
  width: 100%;
  height: 100%;
  position: absolute;
  top: auto;
  bottom: 0;
  transform: translateX(-100%);
  transition: transform 0.5s ease, opacity 0.5s ease;

}

.overlay:hover img {
  transform: scale(1.1);
  transition: transform 0.5s;
}

.overlay:hover .slide-right {
  opacity: 1;
  transform: translateX(0px);
}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando