I have the following code snippet to change the src of an img tag when I hover over it.
<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'">
It runs as expected, but how do I add a transition time to the image when the event is fired? Right now, it changes instantly.
Please use this code.
.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>