Problema con transition en img, no reconoce after y after:hover

[lepe]

Iniciado por Rafael

Yo la realidad es de que no he probado tu código, solo quiero hacer notar la lógica.

<div class="product-image-container">
- <a>
- <img>
- </a>
</div>

El codigo acaba siendo bastante simple:

Código CSS:

.product-image-container > a > img {
    box-shadow: 0px 0px 0px #888888;
    transition: all .3s ease-in-out;}
 
.product-image-container > a > img:hover {
    box-shadow: 10px 10px 5px #888888;
    transition: all .3s ease-in-out;}
 

Repito el código para la transición de ida y vuelta.

HOla buenas

Creo que como dice ArturoGallegos el problema está en que el after y before no funcionará nunca en un img. Añadí a tu codigo los siguiente pero no funcionó tampoco.

Código CSS:

.product-image-container > a > img {
    position: relative; }
.product-image-container > a:after > img {
    background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0;
  transition: all 0.8s ease-in-out 0s;
  display: inline-block;
  position: absolute;
  right: -113px;
  width: 200px;
  height: 352px;
  content: "";
  top: -107px;}
 
.product-image-container > a:hover::after > img {
      transition: all 0.8s ease-in-out 0s;
  right: -140px;
  width: 0;}
 

Y si no se añade el before o after tengo mis dudas de que pueda funcionar la transición que va de izquierda a derecha en la img con la transparencia rgba(255, 255, 255, 0.2), el box shadow no es el efecto deseado.

Para que podais entender lo que intentó es el ejemplo del boton ubicado arriba a la derecha que tiene el efecto de izquierda a derecha, la diferencia a ese ejemplo es que yo lo deseo aplicar a una etiqueta img con un opacity a 0.2
https://tympanus.net/Development/CreativeButtons/

saludos