How can I get my img src to keep changing between 3-4 images when hovered?-CodePudding

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 >
                <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?

CodePudding user response：

I've implemented an example by JS, I hope this will be helpful.

const poroduct = document.getElementById('pr');
const productImages = poroduct.querySelectorAll('img');

let intervalId;
let i = 0;

poroduct.addEventListener('mouseenter', function() {
  fadeImg();
  intervalId = setInterval(fadeImg, 1500)
});

poroduct.addEventListener('mouseleave', function() {
  clearInterval(intervalId);
  productImages[i].classList.remove('active');
  productImages[0].classList.add('active');
  i = 0;
});

function fadeImg() {
  productImages[i].classList.remove('active');
  i = (i   1) % 4;
  productImages[i].classList.add('active');
}

.imagebox img {
  height: 200px;
  width: 350px;
  position: absolute;
  opacity: 0;
  transition: opacity 500ms;
}

.imagebox img.active {
  opacity: 1;
}

<div >
  <a href="#" id="pr">
    <img  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>