Tengo el siguiente fragmento de código para cambiar el src de una etiqueta img cuando paso el mouse sobre él.
<img src="./Path/to/image.png" alt="" class="exhibit-banner-img" onmouseover="this.src='./Path/to/newimage.png'" onmouseout="this.src='./Path/to/image.png'">Funciona como se esperaba, pero ¿cómo agrego un tiempo de transición a la imagen cuando se activa el evento? En este momento, cambia instantáneamente.
Utilice este código.
.img-container { position: relative; display: inline-block; } .img-container img { width: 200px; height: 200px; vertical-align: middle; object-fit: cover; transition: all .5s ease; } .img-container img:first-child { position: relative; } .img-container img:last-child { position: absolute; z-index: 1; top: 0; left: 0; opacity: 0; } .img-container:hover img:last-child { opacity: 1; } <span class="img-container"> <img src="https://www.w3schools.com/html/pic_trulli.jpg"> <img src="https://www.w3schools.com/html/img_chania.jpg"> </span>