Is there a way I could trigger some effects similar to zoom effect, but doesn't change the image width and height?

user_17710526 0
Viewed 41

I am creating a photo gallery.

let img = document.createElement('img')
      img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_%28svg%29.svg/1250px-Wikipedia_logo_%28svg%29.svg.png"
     // console.log(alldata[i].links[0].href)
     let border = document.createElement('div')
     border.appendChild(img)
     border.className = 'gallery'
       document.body.appendChild(border)
:root {
--wid: 300px;
}
.gallery{
   background: grey;
    width: var(--wid);
}
img{
   height: 250px;
   width: var(--wid);
}
img:hover { 
     transform: scale(1.5); 
    }

I want to trigger an effect where when user hover over the img, it will become bigger but keep the same width. I have tried to use transform: scale(1.5); or zoom:150%. Both of them work find, but they will make the width and height image become bigger.

Is there a way I could trigger the effect similar to zoom, but doesn't change the image width and height?

This is a photo gallery website where show the similar effect I want to make (when user hover the img, the img will zoom in a little bit like about 110%)

Thanks for any responds!

css html javascript
2 Answers

It is rather straightforward: you simply need to set .gallery to hide overflowing content, and then add a simple CSS transition to the img element.

p/s: You might want to use object-fit to ensure you don't end up skewing the aspect ratio of the image.

:root {
  --wid: 300px;
}

.gallery {
  background: grey;
  width: var(--wid);
  overflow: hidden;
}

img {
  display: block;
  height: 250px;
  width: var(--wid);
  transition: all .25s ease-in-out;
  
  /* Optional: to avoid skewing of aspect ratio */
  object-fit: contain;
}

img:hover {
  transform: scale(1.5);
}
<div class="gallery">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_%28svg%29.svg/1250px-Wikipedia_logo_%28svg%29.svg.png" />
</div>

user_3959100 

    :root {
      --wid: 300px;
    }

    .gallery {
      background: grey;
      width: var(--wid);
      overflow: hidden;
     
    }

    img {
      display: flex;
      height: 250px;
      width: var(--wid);
      transition: all .50s ease-in-out;
      
      /* Optional: to avoid skewing of aspect ratio */
      object-fit: contain;
    }

    img:hover {
      transform: scale(2);
    }
    <div class="gallery">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_%28svg%29.svg/1250px-Wikipedia_logo_%28svg%29.svg.png" />
    </div>

user_179433110
Related