Estoy usando este código para cambiar de una imagen a otra:
<img title="Hello" src="selfie.jpg" onmouseover="this.src='hero_image.png'" onmouseout="this.src='selfie.jpg'" />
Necesito ayuda con el código para poder ralentizar la transición de una imagen a la siguiente.
La solución ideal para esto sería renderizar las dos imágenes y cambiar su opacity en lugar de cambiar src por la misma etiqueta. Algo como :
<div id="container"> <img class="bottom" src="hero_image.png" /> <img class="top" src="selfie.svg" /> </div> Una vez que esté jugando con la opacity , el efecto de transición se puede aplicar usando el siguiente CSS :
#container img { position:absolute; left:0; transition: opacity 1s ease-in-out; } #container img.top:hover { opacity:0; }