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

[lepe]

Hola rafael

siguiendo la lógica de tu ejemplo, he intentado hacerlo sin after ni before y usando en su lugar el hover, casí he conseguido el efecto deseado, apreciaciones:

PROS
Toma la anchura deseada de solo la anchura de la img
CONTRA
Solo consigo ver el efecto por fuera de la img gracias al padding de 20px, el efecto deseado funciona pero por detras de la img y si le aplico un z-index superior no consigo que el efecto se sobreponga sobre la imagen absolutamente

Código CSS:

.product-image-container > a > img {
  padding:20px;
  display: block;
  background-image: linear-gradient(to left,
                                    transparent,
                                    transparent 50%,
                                    #00c6ff 50%,
                                    #00c6ff);
  background-position: 100% 0;
  background-size: 200% 100%;
  transition: all .25s ease-in; }
 
.product-image-container > a > img:hover {
  background-position: 0 0; }
 

¿Alguna sugerencia de codigo para que el efecto se vea por encima de la imagen?


NOTA: tengo en el css otras capas que quizas podrían interferir en el css, las expongo a continuación:

Código CSS:

ul.product_list .product-image-container {
  text-align: center; }
  ul.product_list .product-image-container img {
    position: relative;
    margin: 0 auto;
    top: 21px; }
 

saludos