#cf4 {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
  }
  #cf4 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;
  }

  #cf4 img.top {
    -webkit-transform:scale(0,0);
    -moz-transform:scale(0,0);
    -o-transform:scale(0,0);
    transform:scale(0,0);
    opacity:0;

  }

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

  #cf4:hover img.bottom, #cf4.hover_effect img.bottom {
    -webkit-transform:scale(0,0);
    -webkit-transform-origin: bottom left;
    -moz-transform:scale(0,0);
    -moz-transform-origin: bottom left;
    -o-transform:scale(0,0);
    -o-transform-origin: bottom left;
    transform:scale(0,0);
    transform-origin: bottom left;
  }