Overlay Efeito Slide Left

Overlay Efeito Slide Left

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

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

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

Vamos Adicionar o HTML

      <article class="overlay">
        <img src="uploads/foto.jpg" alt="foto.jpg">
        <div class="slide-left">

            <h2 class="title-hover"> 

                <a href="#" title="Leia mais"><i class="icon icon-magnifying-glass"></i> Leia mais</a>
            
            </h2>

        </div>
      </article>

Vamos Adicionar o CSS

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

.overlay {

    margin: auto;
    width: 400px;
    height: 250px;
    position: relative;
    color: #ffffff;
    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 {
 
    font-weight: 300;
    font-size: 16px;

}

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

.title-hover {

    margin: 0;

}

.slide-left {

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.70);
  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.2);
  transition: transform 0.5s;

}

.overlay:hover .slide-left {
  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