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

[Rafael]

Por otro lado, justamente yo estoy trabajando en algo similar.

Mi lógica es la siguiente:

Código HTML:

<div class="product-image-container">
    <img><a>Texto encima de la imagen</a>
</div>
 

Por una razón. Quiero tener la posibilidad de que aparezca un texto explicativo de la sección.

La lógica del css:

1) El div me define el ancho de mi caja.
2) La imagen va del 100% del ancho del contenedor y define el alto proporcionalmente.
3) El <a> crecerá al alto definido por la imagen, y el ancho definido por la caja.

Código CSS:

.product-image-container {
width: 200px;
position: relative;}
.product-image-container img {width: 100%;}
 
.product-image-container {width: 100%;
height: 100%;
position: absolute:
top: 0;}
 

Y el efecto de sombra etc, se lo doy a toda la caja

Código CSS:

.product-image-container {box-shadow: 5px 5px 5px #000;}
 

Esto me da independencia a hacer efectos al link encima o a toda la caja.