.image-container {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
}

.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}

.image-container:hover img {
transform: scale(1.2);
}

Image Change Animation using JavaScript

In this article, we will learn how to create an image change animation using JavaScript. We will use event listeners and CSS transitions to achieve this effect.

function changeImage(element) {
element.getElementsByTagName(‘img’)[0].src = “image2.jpg”;
}

function resetImage(element) {
element.getElementsByTagName(‘img’)[0].src = “image1.jpg”;
}