Ver Mensaje Individual
  #7 (permalink)  
Antiguo 15/04/2017, 16:45
lepe
 
Fecha de Ingreso: febrero-2008
Mensajes: 160
Antigüedad: 16 años, 9 meses
Puntos: 1
Respuesta: Problema con transition en img, no reconoce after y after:hover

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:
Ver original
  1. .product-image-container > a > img {
  2.   padding:20px;
  3.   display: block;
  4.   background-image: linear-gradient(to left,
  5.                                     transparent,
  6.                                     transparent 50%,
  7.                                     #00c6ff 50%,
  8.                                     #00c6ff);
  9.   background-position: 100% 0;
  10.   background-size: 200% 100%;
  11.   transition: all .25s ease-in; }
  12.  
  13. .product-image-container > a > img:hover {
  14.   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:
Ver original
  1. ul.product_list .product-image-container {
  2.   text-align: center; }
  3.   ul.product_list .product-image-container img {
  4.     position: relative;
  5.     margin: 0 auto;
  6.     top: 21px; }

saludos