Intentando que la imagen original pase el mouse sobre una copia un poco más grande de sí misma. Cuando usé una imagen con "this.src=imgURL"
No tuve ningún problema, agregar Javascript/css creó una imagen posterior permanente en el sitio web y quiero que esto aplique varias imágenes, no solo 1. Con el css, solo se aplica a una imagen en ese lugar determinado. Intenté usar Javascript para crear un bucle para cada imagen, pero estoy completamente atascado en este momento, ¿alguien puede ayudarme con alguna orientación?
function hideImage() { document.getElementById("full").src = ""; } function showImage(img) { var src = img.src; var largeSrc = src.replace('small', 'large'); document.getElementById('full').src = largeSrc; } var images = document.querySelectorAll('.thumbnail'); for(var i = 0; i < images.length; ++i) { var image = images[i]; console.log(image.src); // output: image1.jpg, image2.jpg, image3.jpg } #full { position: absolute; width: 100px; height: 100px; display:block; top: 200px; left:170px; border: 10px solid rgb(255, 255, 255); outline: 1px solid black; margin: 10px } <td><input type="checkbox" name="index[]" value="10" /></td> <td><img onmouseover="showImage(this)" onmouseout="hideImage()" src="images/art/thumbs/05030.jpg" class="thumbnail" /></td> <span><img id="full" /></span>Creo que eso es lo que estás tratando de hacer ... Puedes manejarlo sin javascript
img{ width:150px; height: 150px; transition: .5s ease-in-out; } img:hover{ transform: scale(1.3) } <img src="https://imgs.search.brave.com/uWn5s0ly7BjMZKuhrBAPx9ribLL5QuMPt04vwwqQqak/rs:fit:759:225:1/g:ce/aHR0cHM6Ly90c2Uz/Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC51/NWpkMkliUnhZLTJY/YnFQWUM0QUFnSGFF/byZwaWQ9QXBp" alt="img1" /> <img src="https://imgs.search.brave.com/v74JGUc9jLt5bZnyFimXTlAQOJgbrxTygj8i-ZDueTc/rs:fit:759:225:1/g:ce/aHR0cHM6Ly90c2Uz/Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC5u/VTJ3THpWbjJPdlRh/ZDFCOTl1cU93SGFF/byZwaWQ9QXBp" alt="img2" />¿Puedes probar esto?
Primero recopila todas las imágenes.
Luego, agregue un detector de eventos para los eventos mouseover y mouseout para agrandar las imágenes y ocultarlas.
const images = document.querySelectorAll('.thumbnail'); for (let i = 0; i < images.length; i++){ images[i].addEventListener('mouseover', (e) =>{ const image = e.target; image.src = 'https://source.unsplash.com/random/400x400'; image.style.width = "100%"; }) images[i].addEventListener('mouseout', (e) =>{ const image = e.target; image.style.visibility = "hidden"; }) } *, *::before, *::after { box-sizing: border-box; } body{ min-height: 100vh; overflow: hidden; display: grid; place-content: center; margin:0; background-color: bisque; } .container{ display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); gap: 5rem; } .thumbnail { border: 2px solid black; width: 75%; display: block; cursor: pointer; } <div class="container"> <img src="https://picsum.photos/400/400?random=2" alt="" class="thumbnail" /> <img src="https://picsum.photos/400/400?random=3" alt="" class="thumbnail" /> <img src="https://picsum.photos/400/400?random=4" alt="" class="thumbnail" /> <img src="https://picsum.photos/400/400?random=6" alt="" class="thumbnail" /> </div>