No CSS3, é possível colocar opacidade no elemento, sem que a mesma passe para a sombra, se limitando apenas ao elemento em si?
Exemplo:
.imagem-beneficios {
width: 60%;
opacity: 1;
transition: 400ms;
box-shadow: 10px 10px 10px #000000;
}
.imagem-beneficios:hover {
opacity: 0.3;
}
Ao passar o mouse sobre a imagem acima, a opacidade também vai para a sombra atrás do elemento. Teria como fazer a opacidade se limitar só a imagem?