Hovering image and displaying a larger copy of itself-CodePudding

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 onm ouseover="showImage(this)" onm ouseout="hideImage()" src="images/art/thumbs/05030.jpg"  /></td>
<span><img id="full" /></span>

CodePudding user response：

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" />

CodePudding user response：

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 >
      <img
        src="https://picsum.photos/400/400?random=2"
        alt=""
        
      />
      <img
        src="https://picsum.photos/400/400?random=3"
        alt=""
        
      />
      <img
        src="https://picsum.photos/400/400?random=4"
        alt=""
        
      />
      <img
        src="https://picsum.photos/400/400?random=6"
        alt=""
        
      />
</div>