Overlay Efeito Slide Right

Overlay Efeito Slide Right

Overlay Efeito Slide Right na Imagem

O efeito “Overlay Slide Right” é uma técnica visual bastante utilizada em interfaces modernas de sites e aplicativos para adicionar interatividade e sofisticação ao design. Ele consiste em uma sobreposição (overlay) que se move da esquerda para a direita sobre uma imagem, geralmente ativada ao passar o cursor (hover) ou ao rolar a página. Esse tipo de animação é leve, elegante e melhora a experiência do usuário, destacando elementos de forma dinâmica sem comprometer o desempenho.

Como Funciona

O “Slide Right” é, basicamente, uma animação onde uma camada — geralmente semitransparente ou contendo texto, ícones ou botões — desliza horizontalmente sobre a imagem de fundo. O efeito pode ser criado com HTML, CSS e, em casos mais avançados, com JavaScript para maior controle.

Aplicações Comuns

• Galerias de fotos: Mostrar detalhes ou informações adicionais ao passar o mouse sobre uma imagem.
• Portfólios: Destacar o título do projeto e um link para visualização completa.
• E-commerce: Apresentar opções de compra rápida ou mais detalhes de um produto.
• Banners promocionais: Criar chamadas visuais mais atrativas e interativas.

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!

Conclusão

O efeito Overlay Slide Right é uma ferramenta poderosa para enriquecer a interação do usuário com interfaces digitais, especialmente quando bem implementado com transições suaves e boa responsividade. Ele melhora a navegabilidade sem comprometer o conteúdo principal, sendo uma escolha cada vez mais comum em design de interfaces modernas.

Veja o Resultado baixo!

Baixar Código Veja Funcionando