I am currently working on a college project for a clothing website, so what I want is that when the user hovers over a product image on the main feed, the product image keeps changing between 3-4 images of that product with a few milliseconds of transition.
this is my HTML code
<div class="imagebox">
<a href="#"><img src="../img/Mom Sarees/5pcs/A93A5321.JPG" alt="Saree no: A93A5321 "></a>
</div>
this is the CSS
.imagebox{
display: inline-block;}
.imagebox img{
margin-top: 20px;
height: 400px;
margin-right: 10px;}
Is there a way to do that using CSS or JS?
I've implemented an example by JS, I hope this will be helpful.
let intervalId;
let i = 0;
document.querySelectorAll('.product-images').forEach((poroduct) => {
const productImages = poroduct.querySelectorAll('img');
poroduct.addEventListener('mouseenter', function() {
fadeImg(productImages);
intervalId = setInterval(() => fadeImg(productImages), 1500);
});
poroduct.addEventListener('mouseleave', function() {
clearInterval(intervalId);
productImages[i].classList.remove('active');
productImages[0].classList.add('active');
i = 0;
});
});
function fadeImg(productImages) {
productImages[i].classList.remove('active');
i = (i + 1) % 4;
productImages[i].classList.add('active');
}.container {
display: flex;
}
.imagebox {
position: relative;
flex: 1;
margin: 15px;
}
.imagebox img {
max-height: 200px;
max-width: 100%;
position: absolute;
opacity: 0;
transition: opacity 500ms;
}
.imagebox img.active {
opacity: 1;
}<div class="container">
<div class="imagebox">
<a href="#" class="product-images">
<img class="active" src="https://fakeimg.pl/350x200/550000/?text=Image1" />
<img src="https://fakeimg.pl/350x200/005500/?text=Image2" />
<img src="https://fakeimg.pl/350x200/000055/?text=Image3" />
<img src="https://fakeimg.pl/350x200/005555/?text=Image4" />
</a>
</div>
<div class="imagebox">
<a href="#" class="product-images">
<img class="active" src="https://fakeimg.pl/350x200/000000/?text=Image1" />
<img src="https://fakeimg.pl/350x200/faaa22/?text=Image2" />
<img src="https://fakeimg.pl/350x200/885500/?text=Image3" />
<img src="https://fakeimg.pl/350x200/f500aa/?text=Image4" />
</a>
</div>
<div class="imagebox">
<a href="#" class="product-images">
<img class="active" src="https://fakeimg.pl/350x200/0000ff/?text=Image1" />
<img src="https://fakeimg.pl/350x200/00ff00/?text=Image2" />
<img src="https://fakeimg.pl/350x200/ff0000/?text=Image3" />
<img src="https://fakeimg.pl/350x200/ffff00/?text=Image4" />
</a>
</div>
</div>