Solucionado
Boa tarde!
Estou precisando fazer com que apareça uma "película" em degrade em frente de uma imagem ao passar o mouse em cima dela. A principio imaginei que seria com :hover:after, porém nenhuma das minhas tentativas tem dado certo. Poderiam me dar uma força a respeito?
hoje, com a Alura e o Google Gemini
Oi André,
Coloca seu código no Jsbin e mande o link por aqui para conseguirmos te ajudar, ok?
A princípio, seria com o hover:after que você mencionou sim.
Abcs!
A principio não tenho o código feito. Mas logo precisarei fazer isso.
Basicamente é uma imagem qualquer <img src="teste.png"> e ao passar com o mouse por cima dela, fica uma película preta transparente. Achei que seria da seguinte forma, porém não há efeito algum:
img:hover:after {
content: "";
background-color: rgba(0,0,0,.8);
z-index: 1;Oi Andre,
Como o elemento img não possui conteúdo, o browser não consegue colocar um :after ou um :before nele.
O que poderia ser feito é uma div em volta dessa imagem, e fazer esse :hover:after nela. Fiz aqui para você dar uma olhada.
Espero ter ajudado,
Abcs!
Boa tarde, Natan!
Consegui fazendo da seguinte forma:
.tst::after {
content: '';
position: absolute;
background-image: linear-gradient(to top,rgba(0,0,0,.6),transparent);
bottom: 0;
left:0;
width:100%;
height: 100%;
}
.tst:hover::after {
background-image: linear-gradient(to top,rgba(0,0,0,.8),transparent);
}Colocando isso em cima de uma imagem.
De qualquer forma agradeço a disposição!