1

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>

1 Resposta 1

0

Seu problema é que a imagem na verdade está por cima do texto, para trazer o texto para cima da imagem como opacidade vc pode colocar position:relative nele e com o z-index vc coloca ele sobre a imagem, sem fica dando a impressão que o texto tb está transparente.

OBS: Não mexi em nada no HTML só no CSS, deixei o comentário no código

Veja o exemplo:

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>

2
  • 1
    Nossa, mano. Eu tinha tentado fazer isso diversas vezes só com z-index. Faltou o position. Valeuuuu! 30/01/2019 às 16:07
  • @GeahnMachado que bom que resolveu! Se vc acha que a Pergunta foi solucionada não se esqueça de marca-la como aceita para não ficar em aberto no site. Basta clicar nesse ícone ao lado das setas :)
    – hugocsl
    30/01/2019 às 16:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .