Actualmente estoy trabajando en un proyecto universitario para un sitio web de ropa, así que lo que quiero es que cuando el usuario pase el mouse sobre la imagen de un producto en el feed principal, la imagen del producto siga cambiando entre 3-4 imágenes de ese producto con unos pocos milisegundos de transición.
este es mi código HTML
<div class="imagebox"> <a href="#"><img src="../img/Mom Sarees/5pcs/A93A5321.JPG" alt="Saree no: A93A5321 "></a> </div>este es el CSS
.imagebox{ display: inline-block;} .imagebox img{ margin-top: 20px; height: 400px; margin-right: 10px;}¿Hay alguna manera de hacerlo usando CSS o JS?
Implementé un ejemplo de JS, espero que esto sea útil.
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>