Transición entre imágenes

[webgama]

Hola!

Tengo un problema, quiero que cuando se pase el ratón por encima de una imagen haga una transición y muestre otra imagen. Lo tengo prácticamente hecho pero el problema que tengo es que la imagen que solo se muestra al poner el ratón, al esconderse se ve todo el recorrido. ¿Cómo podría solucionarlo?

web

Gracias.

[Luisejo]

Hola webgama.

Por lo que he estado viendo en el código fuente de tu web, tienes un clase css para el hover y otra para el estado normal, además... cada una de ellas en un div diferente.

Esto no es correcto.
Te recomiendo que hagas lo siguiente. Maneja todo en un mismo div,  Es decir, si el div es 'product-category-image' carga en esta clase css el background de la niña y luego creas otra clase 'product-category-image:hover' y en esta cargar el background del conejito.

De este modo, teniendo una sola caja (div), no tendras el problema de que se salga en el efecto fadein, fadeout.

Ya me cuentas.

[webgama]

Hola,

 

Disculpa por todo el tiempo que ha pasado, pero no me llegó notificación de la respuesta.

 

He cambiado el código por esto y ahora no me hace ni la transición.

 

<div class="product-category-image"><a href="https://www.micanesu.com/categoria-producto/madison/">
		<img src="https://www.micanesu.com/wp-content/uploads/IMAGEN-BAJA-0028-600x600.jpg" alt="Madison" width="600" height="600" /></a>
        <a  class="product-category-hover" ><img src="https://www.micanesu.com/wp-content/uploads/2017/08/madison_web.jpg" alt="" /></a>
    </div>  

 

¿Esta sería la modificación me comentabas?

 

Gracias, saludos.

Edited February 17, 2018 by webgama (see edit history)

[Luisejo]

En 17/2/2018 a las 5:17 PM, webgama dijo:

Hola,

 

Disculpa por todo el tiempo que ha pasado, pero no me llegó notificación de la respuesta.

 

He cambiado el código por esto y ahora no me hace ni la transición.

 

<div class="product-category-image"><a href="https://www.micanesu.com/categoria-producto/madison/">
		<img src="https://www.micanesu.com/wp-content/uploads/IMAGEN-BAJA-0028-600x600.jpg" alt="Madison" width="600" height="600" /></a>
        <a  class="product-category-hover" ><img src="https://www.micanesu.com/wp-content/uploads/2017/08/madison_web.jpg" alt="" /></a>
    </div>  

 

¿Esta sería la modificación me comentabas?

 

Gracias, saludos.

Las notificaciones del foro no funcionan muy allá jeje.

Si quieres, pásame credenciales de tu site y te hecho un cable.