<div class="container">
  <p>
    Hover over the four images to see their clipping region expand.
  </p>
  <div class="element element-1">
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/clip/cat-1.jpg" alt="">
  </div>
  <div class="element element-2">
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/clip/cat-4.jpg" alt="">
  </div>
  <div class="element element-3">
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/clip/cat-3.jpg" alt="">
  </div>
  <div class="element element-4">
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/clip/cat-2.jpg" alt="">
  </div>
</div>
body {
  color: #555;
  background: #b0dcf1;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  width: 300px;
  position: relative;
}

.element {
  width: 300px;
  height: 300px;
  z-index: 0;
  position: absolute;
  -webkit-transition: clip .4s ease-in-out, z-index .2s linear .4s;
  transition: clip .4s ease-in-out, z-index .2s linear .4s;
}

img {
  max-width: 100%;
}

.element-1 {
  background-color: #2c3e50;
  clip: rect(0px, 150px, 150px, 0px);
}

.element-2 {
  background-color: #f39c12;
  clip: rect(0px, 300px, 150px, 150px);
}

.element-3 {
  background-color: #16a085;
  clip: rect(150px, 150px, 300px, 0px);
}

.element-4 {
  background-color: #8e44ad;
  clip: rect(150px, 300px, 300px, 150px);
}

.element:hover {
  z-index: 1;
  -webkit-transition: clip .4s ease-in-out .2s, z-index .2s linear;
  transition: clip .4s ease-in-out .2s, z-index .2s linear;
  clip: rect(0px, 300px, 300px, 0px);
}