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!
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> :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>