Hovering image and displaying a larger copy of itself

Question

Trying to have original image hover a little larger copy of itself. When I used picture with "this.src=imgURL"

I had no problem, adding Javascript/css made a permanent after image on website and I want this to apply several pictures not just 1. With the css it only apply to one picture in that certain spot. I tried using Javascript to create a loop for every picture, but I am completely stuck right now, can anyone help with some guidance?

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>

you _could_ add an event listener to each image. But may I suggest a different approach? currently each hover will cause the browser to send out a new request. How about fetching the larger one from the start and simply use css to make it smaller? and then [on hover](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_zoom_hover) make it larger, just by changing its width and height. (and not with scale as seen in the enclosed example). — Yarin_007, Apr 29 '22 at 22:38
I would really like to add an event listener, I am trying to use as little CSS as possible. should I add the event listener after my getelementByID? @Yarin_007 — BurntChickenNugget, Apr 29 '22 at 22:50
Make sure your code runs after all the dom has been [loaded](https://stackoverflow.com/questions/807878/), and then something like `document.querySelectorAll('img').forEach(item => { item.addEventListener('mouseover', event => { console.log(item) }) })`. on mouseleave change the src back to the original. but it is *strongly* suggested you choose the css way. why are you trying to use as little css as possible? you could also change the image size with js. (although it does it via css eventually) `img.style.width='400px'` — Yarin_007, Apr 29 '22 at 23:04
@Yarin_007 Appreciate it, haven't made it work yet but I'll keep trying. This is my final project for school, if I can make it work with JS It'll get me an "A". — BurntChickenNugget, Apr 29 '22 at 23:27
Technically, changing an elements style with JS is not using CSS. `document.querySelectorAll('img').forEach(item => { item.addEventListener('mouseenter', event => { item.style.width="120%" }); item.addEventListener('mouseleave', event => { item.style.width="" }) })` — Yarin_007, Apr 29 '22 at 23:36

score 3 · Accepted Answer · answered Apr 29 '22 at 23:29

I think that's what you're trying to do .. You can handle it without 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" />

score 0 · Answer 2 · answered Apr 29 '22 at 23:56

Can you please try this.

First collect all the images.

Then add an eventlistener for mouseover and mouseout events for making images bigger and hide them.

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>

Hovering image and displaying a larger copy of itself

2 Answers2