Overlay Efeito Slide Up

Overlay Efeito Slide Up

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!

Veja o Resultado baixo!

Baixar Código Veja Funcionando