2
respostas

Texto por cima de imagem com opacidade

Oi Fiquei com uma dúvida. Com a imagem estando opaca é possível escrever por cima da imagem. Como seria isso? Para testar, tentei colocar o float da imagem do exercício para a esquerda (em vez de direita) e não houve alteração na página. Poderiam me explicar ou dar um exemplo de como eu conseguiria fazer isso funcionar?

Obrigada,

2 respostas

É possível, desde que você aplique a opacidade somente na imagem e não por exemplo, na div onde está a imagem e o seu texto, que aí neste caso tudo ficaria opaco, confere se você está especificando o elemento correto para a opacidade. Qualquer coisa manda um print do trecho do seu código pra auxiliar no entendimento da dúvida.

Por exemplo, no código eu queria colocar a classe 'lista-beneficios' por cima da imagem 'imgbeneficio', que tem opacidade e tal. Mas mesmo colocando o alinhamento à esquerda/direita para a direção da imagem, o texto não sobrepõe...

.imgbeneficio{ width: 60%; opacity: 0.3; transition: 400ms; box-shadow: 10px 10px 10px 0 #000000; }

.lista-beneficios{ width: 40%; display: inline-block; vertical-align: top; }