1
resposta

Como sobrepor uma imagem com outro elemento, deixando a debaixo com menos opacidade?

Gostaria de saber como posso fazer com que (ao passar o mouse), a minha imagem que está embaixo, fique com menos opacidade e nela sobreponha um elemento qualquer.

Por exemplo: Muitos sites de filmes executam essa tarefa. Quando passamos o mouse em cima da imagem, aparece um simbolo de 'Play' em cima da imagem (mas não substituindo ela). Apenas deixando ela menos opaca.

Como posso fazer isso usando CSS? É possível?

1 resposta

Opa Diogenes Felipe,

Dá sim, vc vai ter que usar o pseudo-elemento hover do CSS. Fica algo mais ou menos assim

img.nomeDaClasse:hover{ opacity: 0.5; }

Nesse link aqui tem uns exemplos bem simples: https://www.w3schools.com/cssref/sel_hover.asp

Espero ter ajudado, e bons estudos! =)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software