Hola gente
Estoy intentando añadir un efecto shadow al pasar el cursor sobre una imagen que está en varias capas, el problema es que la imagen no reconoce las clases :after y after:hover. Les comparto las pruebas que hice:
#shad {
position: relative; }
#shad:after {
background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
transition: all 0.8s ease-in-out 0s;
display: inline-block;
position: absolute;
right: 170px;
width: 300px;
height: 152px;
content: "";
top: 17px; }
#shad:hover::after {
right: -465px;
transition: all 0.8s ease-in-out 0s; }
Con está clase meto la id como sigue:
<div class="product-image-container">
<a
id="shad" class="product_img_link" href="#" title="xxxx">
<img src="xxx.jpg" class="replace-2x img-responsive" height="135" width="180">
</a>
</div>
----------------------
Luego lo intenté de la siguiente manera:
.shad img {
position: relative; }
.shad:after img {
background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
transition: all 0.8s ease-in-out 0s;
display: inline-block;
position: absolute;
right: 170px;
width: 300px;
height: 152px;
content: "";
top: 17px; }
.shad:hover::after img {
right: -465px;
transition: all 0.8s ease-in-out 0s; }
<div class="product-image-container">
<a class="product_img_link" href="#" title="xxxx">
<img src="xxx.jpg" class="replace-2x img-responsive
shad" height="135" width="180">
</a>
</div>
----------------
Al hacer hover sobre la imagen no reconoce las clases de ninguna manera. Lo he intentado hacerlo sobre los divs y si funciona, el problema es que ello no me sirve porque coge la anchura de todo el div y si le pongo un "overflow:hidden" entonces otros span anteriores al div que necesito que se muestren fuera del overflow se recortan
¿Alguna sugerencia para que las clases :after y :hover::after me las reconozca la img?
saludos y gracias