Mengganti gambar dengan efek css

Dengan css, banyak hal yang dapat kita lakukan contohnya:



Ini adalah scriptnya:


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

  </style>
  <div id="cf4" class="hover">
    <img class="bottom shadow" src="http://motorcycles.ppblogs.com/files/2011/07/gambar_motor_aprilia_fv2_1200_3.jpg" />
    <img class="top shadow" src="http://www.starresim.com/data/media/27/www.starresim.com_gambar_motor_benelli_tnt_titanium_1.jpg" />
  </div>