Overlay Efeito Slide Left

Overlay Efeito Slide Left

Overlay Efeito Slide Left

O overlay com efeito Slide Left é uma técnica moderna de design de interface que permite exibir um conteúdo sobreposto ao layout principal com uma animação suave que desliza da esquerda para a direita. Esse efeito é muito utilizado em menus laterais, modais e painéis de navegação, oferecendo uma experiência visual elegante e interativa ao usuário.

O que é um Overlay?

Um overlay é uma camada que aparece sobre o conteúdo principal da página, geralmente semi-transparente, para destacar um elemento específico (como um menu ou caixa de diálogo) e suavizar o fundo. Ele é frequentemente utilizado para captar a atenção do usuário ou para apresentar informações adicionais sem redirecionar para outra página.

Como funciona o Slide Left?

O efeito Slide Left faz com que o conteúdo do overlay entre na tela deslizando da lateral esquerda. A animação pode ser feita com CSS puro, usando transform e transition, ou com frameworks JavaScript como React, Vue.js, ou bibliotecas como GSAP.

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