theNeighbourhoodGhost theNeighbourhoodGhost - 1 year ago 115
HTML Question

Zoom on image inside div without div moving

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

Answer Source

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;
#container:hover img {
  transform: scale(1.3);
  transform-origin: 50% 50%;
<div id="container">
    <img id="image" src="">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download