Overlay Efeito Slide Down

Overlay Efeito Slide Down

O efeito “Slide Down” em overlays é uma técnica visual amplamente utilizada no desenvolvimento web para criar transições suaves e modernas ao exibir conteúdos sobrepostos, como modais, menus, notificações ou elementos interativos. Esse tipo de efeito contribui para uma experiência de usuário mais agradável e dinâmica, reforçando a interatividade da interface.

O que é um Overlay?

Um overlay é um elemento gráfico que aparece sobre o conteúdo principal da página, geralmente com fundo semitransparente, para destacar uma ação, exibir uma mensagem ou carregar um componente interativo sem redirecionar o usuário. Ele é muito utilizado em pop-ups, formulários, visualizações de imagens, entre outros.

Entendendo o Efeito Slide Down

O efeito “slide down” faz com que o overlay apareça deslizando de cima para baixo, como se estivesse “caindo” na tela. Diferente de uma simples aparição (fade in), o movimento do slide torna a transição mais fluida e natural. Este tipo de animação chama mais atenção do usuário, tornando o conteúdo emergente mais perceptível.

Aplicações Comuns

• Menus suspensos em dispositivos móveis;
• Avisos ou alertas que deslizam no topo da página;
• Modais que aparecem suavemente a partir do topo;
• Interfaces que exigem atenção rápida sem sair da página atual.

Como Implementar com HTML, CSS

Aqui está um exemplo básico de como implementar um overlay com efeito slide down:

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

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

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

Vamos Adicionar o HTML

     <div class="box-hoverlay">
        <img src="uploads/foto.jpg" alt="Foto">
           <div id="overlay">
              <h2 class="title-hover"><a href="#" target="_blank">Saiba mais...</a></h2>
              <p class="icon icon-triangle-down icone-hover"></p>
           </div>
     </div>

Vamos Adicionar o CSS

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

.box-hoverlay {

  margin: auto;
  width: 320px;
  height: 210px;
  position: relative;
  color: #ffffff;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: -1px 5px 8px 0 rgb(0 0 0 / 30%);

}

.box-hoverlay img {

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

}

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

.title-hover {

  font-weight: bold;
  font-size: 20px;
  letter-spacing: 5px;

}

.title-hover,
.icone-hover {
  margin: 0;
}

#overlay {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.85);
  width: 100%;
  height: 100%;
  position: absolute;
  top: auto;
  bottom: 0;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.box-hoverlay:hover img {
  transform: scale(1.5);
  transition: transform 0.5s;
}

.box-hoverlay:hover #overlay {
  opacity: 1;
  transform: translateY(0px);
}

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

Conclusão

O efeito slide down em overlays é uma solução simples, para aprimorar a usabilidade e o visual de aplicações web. Ao aplicar esse efeito com moderação e propósito, desenvolvedores podem destacar informações importantes sem comprometer a navegação do usuário.

Veja o Resultado baixo!

Baixar Código Veja Funcionando