Text overlay over image

Question

Text overlay over image

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

1

imagem texto

Author: Pedro Augusto, 2019-01-30

Source

1 answers

score 0 · Accepted Answer

Your problem is that the image is actually on top of the text, to bring the text up the image as opacity vc can put position:relative in it and with the z-index VC puts it on the image, without giving the impression that the text tb is transparent.

Note: I did not mess with anything in HTML only in CSS, I left the comment in the code

See 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>