Criar Efeito Overlay Fade

Overlay Fade

Criar um efeito overlay pode ser muito útil quando tem a necessidade de um efeito Hover, assim permite sobrepor uma div com outro conteúdo criando um efeito interessante.  

Vamos iniciar criando o HTML, com uma div principal onde fica a imagem e outra div dentro dela que vai conter um texto.

<div class="limite">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaphjgLO9MW3ubrVvy1GJVa5p-odTKZbdulJJM65N24zhSvUaBR-HzgO7hUqVCtrEPwKYFfs-eD8jTGGZBZdDijGo5_QBTYE-1lfoZR-Hn6u83uxMIrm1G8JakAbe_YDfxwj5mPhOMTUPV/s320/CSS32.jpg" alt="css" class="img">
<div class="overlay">
<h2>Overlay Fade</h2>
</div>
</div>

Preparando o CSS

Vamos iniciar o CSS da div principal, primeiro será necessário definir o tamanho da div principal que vamos atribuir uma class chamada "limite".

.limite{
position: relative;
width: 300px;
height: 300px;
background-color: #000;
}

Observe que esta class possui posição relativa, ou seja a outra div vai receber posição absoluta.

Para manter a imagem responsiva vamos fazer ela pagar 100%.

.img{ width: 100%; }

Criando o CSS da div que vai ser ativado no hover.

Esta class vai se posicionar exatamente encima da outra, e para aproveitar a class vamos usar diplay flex para centralizar os elementos que poderão conter na div.

.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: 0.5s;
         background-color: #008CBA;

         height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

}
.limite:hover .overlay {
  opacity: 0.8;
  transition: 0.5s;
}

Para finalizar um estilo básico no h2.

.overlay h2 {
  color: #fff
  font-size: 2rem;
}

Passe o mouse sobre a imagem abaixo e veja o exemplo.

Overlay Fade