Carregando...

Overlay Efeito Slide Down

Postado: 14 de junho de 2023 Tempo de Leitura: < 1 Minuto

Overlay 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!

Veja o Resultado baixo!

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

150 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados