CSS - Zoom out

by Rodwyn Moreno

HTML

<div class="zoom">
  <img src="http://static.dnaindia.com/sites/default/files/2015/11/21/396912-smart-city.jpg" />
</div>

SCSS

div {
  border: 10px solid #FFFFFF;
  height: 300px;
  width: 300px;
}

.zoom {
  overflow: hidden;
  
  img {
    height: 130%;
    transition: all 1s ease;
    width: 130%;

    &:hover {
      height: 100%;
      width: 100%;
    }
  }
 }