#cf1 {
    position:relative;
    width:inherit;
    margin:0 auto;
  }
  #cf1 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;
  }

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

  }

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

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

   #cf2 {
    position:relative;
    width:inherit;
    margin:0 auto;
  }
  #cf2 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;
  }

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

  }

  #cf2:hover img.top, #cf2.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;
  }

  #cf2:hover img.bottom, #cf2.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;
  }


 #cf3 {
  position:relative;
  width:inherit;
  margin:0 auto;
  }
  #cf3 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;
  }

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

  }

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

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



  #cf4 {
  position:relative;
  width:inherit;
  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: bottom right;
    -moz-transform:scale(1,1);
    -moz-transform-origin: bottom right;
    -o-transform:scale(1,1);
    -o-transform-origin: bottom right;
    transform:scale(1,1);
    transform-origin: bottom right;
  }

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