Olá, preciso de uma ajuda da comunidade. Tenho um exemplo de uma imagem com texto em overlay, a imagem deveria ficar meio opaca com o background preto, como no exemplo, mas o texto não deveria ficar opaco. Funciona assim, sem "hover".
https://jsfiddle.net/qrco3g78/
div {
max-width: 200px;
max-height: 200px;
text-align: center;
background: black;
border-radius:7px;
}
h2 {
color: white;
font-weight: bold;
font-family: Arial;
text-transform: uppercase;
height: 200px;
margin-bottom: -270px;
padding-top: 35%;
}
figure {
margin: 0;
opacity: .8;
}
a {
text-decoration: none;
}
img {
max-width:200px;
max-height:200px;
border-radius:7px;
}
<div>
<h2>Overlay</h2>
<figure>
<a href="http://#" target="_self"><img src="http://www.dominiopublico.gov.br/download/imagem/go000008.jpg"></a>
</figure>
</div>