- Página Inicial
- Códigos CSS Prontos
- Overlay Efeito Slide Down
- Voltar
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
178 Visualizações
Deixe um comentário