Overlay text on image

Question

Hi, I need some help from the community. I have an example of an image with overlay text, the image should be somewhat opaque with the black background, as in the example, but the text should not be opaque. It works like this, no "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>

Answer 1

Your problem is that the image is actually over the text, to bring the text up the image as opacity you can put position:relative in it and with the z-index you place it on the image, without giving the impression that the text also is transparent.

OBS: I didn’t touch anything in HTML only in CSS, I left the comment in the code

Take the example:

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%;
/* aqui vc configura para o texto ficar sobre a imagem com position e z-index */
  position: relative;
  z-index: 2;
}

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="https://placecage.com/200/200"></a>
  </figure>
</div>