Zoom image inside container on mouse over using CSS

by Asif Sharif Shahid

HTML

<div class="container">
  <div class="item">
    <img src="http://images.freeimages.com/images/previews/69f/f-ish-1379242.jpg" />
  </div>
</div>
<br/>
<div class="container">
  <div class="item">
    <img src="http://images.freeimages.com/images/previews/473/dogs-1-1482201.jpg" />
  </div>
</div>
<br/>
<div class="container">
  <div class="item">
    <img src="http://images.freeimages.com/images/previews/0ce/animal-1361355.jpg" />
  </div>
</div>

CSS

.container {
  position: relative;
  width: 480px;
  height: 320px;
  overflow: hidden;
}

.item {
  position: absolute;
  top: 0;
  left: 0;
}

.item img {
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
}

.container:hover .item img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}