Overlay Efeito FadeIn

Overlay Efeito FadeIn

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

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

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

Vamos Adicionar o HTML

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

      <h2 class="title-hover"><a href="#" title="Saiba mais"><i class="icon icon-angellist"></i> Saiba mais</a></h2>

    </div>
  </article>

Vamos Adicionar o CSS

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

.overlay {

  margin: auto;
  width: 400px;
  height: 250px;
  position: relative;
  color: white;
  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 a { color:#ffffff; text-decoration:none; }

.title-hover {
  font-weight: 300;
  font-size: 1.5em;
  font-weight: bold;

}

.title-hover{
  margin: 0;
}

.fadein  {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(255, 206, 13, 0.68);
  width: 100%;
  height: 100%;
  position: absolute;
  top: auto;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.overlay:hover img {
  transform: scale(1.3);
  transition: transform 0.5s;
}

.overlay:hover .fadein {
  opacity: 1;
}

Combinando as Duas seções acima com Html e Css  temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando