Carregando...

Overlay Efeito Slide Left

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

Overlay Efeito Slide Left

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

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

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

Vamos Adicionar o HTML

      <article class="overlay">
        <img src="uploads/foto.jpg" alt="foto.jpg">
        <div class="slide-left">

            <h2 class="title-hover"> 

                <a href="#" title="Leia mais"><i class="icon icon-magnifying-glass"></i> Leia mais</a>
            
            </h2>

        </div>
      </article>

Vamos Adicionar o CSS

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

.overlay {

    margin: auto;
    width: 400px;
    height: 250px;
    position: relative;
    color: #ffffff;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.50);

}

.overlay img {

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

}

.title-hover {
 
    font-weight: 300;
    font-size: 16px;

}

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

.title-hover {

    margin: 0;

}

.slide-left {

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

}

.overlay:hover img {

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

}

.overlay:hover .slide-left {
  opacity: 1;
  transform: translateX(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

296 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