<div id="cf5" class="hover">
    <img class="bottom shadow" src="https://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2015/07/blooging.jpg">
    <img class="top shadow" src="https://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2015/08/blog1.jpg">
  </div>
  #cf5 {
    position:relative;
    height:281px;
    width:450px;
    margin:10px auto;
  }
  #cf5 img {
    position:absolute;
    left:0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }

  #cf5 img.top {
    -webkit-transform:scale(1,0);
    -moz-transform:scale(1,0);
    -o-transform:scale(1,0);
    transform:scale(1,0);
    filter: alpha(opacity=0);
    opacity:0;

  }

  #cf5:hover img.top, #cf5.hover_effect img.top {
    opacity:1;
    -webkit-transform:scale(1,1);
    -moz-transform:scale(1,1);
    -o-transform:scale(1,1);
    transform:scale(1,1);
  }

  #cf5:hover img.bottom, #cf5.hover_effect img.bottom {
    filter: alpha(opacity=0);
    -webkit-transform:rotate(360deg) scale(0,0);
    -moz-transform:rotate(360deg) scale(0,0);
    -o-transform:rotate(360deg) scale(0,0);
    transform:rotate(360deg) scale(0,0);
  }

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.