Overlay Efeito Slide Up

Overlay Efeito Slide Up

O efeito Slide Up é uma técnica visual amplamente utilizada em interfaces modernas para melhorar a experiência do usuário com elementos sobrepostos, conhecidos como overlays. Esse tipo de efeito é particularmente popular em modais, notificações, menus móveis e caixas de informação que precisam aparecer sobre o conteúdo principal da página de maneira suave e atrativa.

O que é um Overlay?

Um overlay é um elemento que se posiciona sobre o restante do conteúdo da página, geralmente com o objetivo de destacar informações, captar atenção ou exigir uma interação do usuário antes de continuar. Pode ser semi-transparente, escurecendo o fundo, e costuma ser usado em conjunto com janelas modais, popups ou painéis de navegação lateral.

Como funciona o Slide Up?

O efeito Slide Up faz com que o overlay (ou o conteúdo dentro dele) apareça deslizando de baixo para cima na tela. Essa transição cria uma sensação de fluidez e suavidade, tornando a interação mais natural e agradável. Do ponto de vista técnico, esse efeito pode ser implementado com CSS (usando transições ou animações) ou com o auxílio de bibliotecas JavaScript para maior controle.

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

Nesta seção, projetaremos uma estrutura simples na tag <article>,<img>, <p>, <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 Up com css.

Vamos Adicionar o HTML

   <article class="hover-slideup">
                    
       <img src="uploads/foto.jpg" alt="Foto">
       <div class="overlay">

          <p class="icon icon-leanpub icone"></p>
          <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 slide Up.

.hover-slideup {

  margin: auto;
  width: 400px;
  height: 250px;
  position: relative;
  color: white;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 5px 5px 10px grey;

}

.hover-slideup img {

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

}

.title-hover {

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

}

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

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

.overlay {

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

}

.hover-slideup:hover img {

  transform: scale(1);
  transition: transform 0.5s;

}

.hover-slideup: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 Overlay Slide Up é uma solução simples e eficaz para criar interações visuais envolventes em páginas web. Ele melhora a usabilidade, moderniza a aparência do site e oferece uma transição suave entre diferentes estados da interface. Implementá-lo pode ser um diferencial em projetos que priorizam uma boa experiência do usuário.

Veja o Resultado baixo!

Baixar Código Veja Funcionando