quiero hacer una preview de imágenes como lo que tiene Amazon cuando abres un producto y tienes las imágenes en pequeño, y al hacer hover sobre cada una, esta se visualiza en grande.
Había pensado en hacer algo con CSS, pero al estar las imágenes que se van a ver en grande dentro de un div, no śe si es posible hacer un selector para ello, así que opté por usar un event listener en JS.
<div class="item__image-container">
<img class="item__image item__image--1 item__image--small" src="1000w-opt.jpg" alt="" />
<img class="item__image item__image--2 item__image--small" src="2000w-opt.jpg" alt="" />
<img class="item__image item__image--3 item__image--small" src="3000w-opt.jpg" alt="" />
<img class="item__image item__image--4 item__image--small" src="" alt="" />
<div class="item__image-container-preview">
<img class="item__image item__image--1 item__image--preview item__image--current" src="1000w-opt.jpg" alt="" />
<img class="item__image item__image--2 item__image--preview" src="2000w-opt.jpg" alt="" />
<img class="item__image item__image--3 item__image--preview" src="3000w-opt.jpg" alt="" />
<img class="item__image item__image--4 item__image--preview" src="" alt="" />
</div>
</div>
La función que creé lo que hace es que cuando item__image--small es hover, entonces item__image--preview tenga opacity = 1
let imageSmall = document.getElementsByClassName("item__image--small");
for(i = 0; i < imageSmall.length; i++) {
var imagePreview = document.getElementsByClassName("item__image--preview")[i];
imageSmall[i].addEventListener("mouseover", () => {
imagePreview.style.opacity = "1";
});
imageSmall[i].addEventListener("mouseout", () => {
imagePreview.style.opacity = "0";
});
}
El problema es que no sé cómo lograr que cuando llame la función en la imagen 1, corresponda a la preview de la imagen 1.