Image Hover Scale Animation

by Vladimir

HTML

<figure>
    <img src="https://d13yacurqjgara.cloudfront.net/users/220419/screenshots/1678299/shot-7.jpg" alt="Thumb" width="400" height="300" />
    <figcaption><div>Thumbnail Caption</div></figcaption>
  </figure>

CSS

figure {
  width: 400px;
  height: 300px;
  overflow: hidden;
}
figure img{
  -webkit-transition: all 0.5s linear;
          transition: all 0.5s linear;
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}
figure:hover img{
  -webkit-transform: scale3d(1.2, 1.2, 1);
          transform: scale3d(1.2, 1.2, 1);
}