Zoom on image inside div without div moving
30,632
Solution 1
Use transform: scale
#container {
display: inline-block;
margin: 20px;
border: 1px solid black;
overflow: hidden; /* clip the excess when child gets bigger than parent */
}
#container img {
display: block;
transition: transform .4s; /* smoother zoom */
}
#container:hover img {
transform: scale(1.3);
transform-origin: 50% 50%;
}
<div id="container">
<img id="image" src="http://placehold.it/150">
</div>
Solution 2
a little bit elegant solution with transition effects
#container {
display: inline-block;
overflow: hidden;
}
#container img {
display: block;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#container:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<div id="container">
<img id="image" src="http://placehold.it/200">
</div>
Author by
Admin
Updated on July 18, 2022Comments
-
Admin almost 2 years
How can I make the image inside of this div scale without the actual div scaling on hover? So I only want the image to get zoomed on.
Here is the code:
<div id="container"> <img id="image" src="some-image"> </div>