3 Amazing CSS3 Image Transitions

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

So guys in this post i'am gonna teach you 3 amazing CSS image transitions as you can read on post title and image above.....they all will work when you'll hover one image will transform to another so here we go + some examples :

Effect #1 :

Example :

HTML :

<div id="cst" class="hover">
 <img class="bottom" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvuZ3J1PM7K0LLUojXi2BAILUKfr66tzZE-lvm7AJJ7A8nzPSE6yaXBhiqVrweNKCgqxJrlr1uaAK4RQmmvnuQYiY3cC62mxgYZYWXYqSvt4u1NXJ573wTRMMkveOvRfRtj8M1HYVwRE/s1600/Sites+Like+Google+Adsense.jpg">
 <img class="top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxar6lVDuAu23qIScn7VVmKxao4WTVJN06z5rTtOPmXrT5DFuDpef5C2qaFNch3AgBPuBIgBAR2NNBQk_MeU9pLWSjvxT-TyOiNHdpZv-Ooy5YNXCf6LhQkBMPextlpAbHNQnCtk25osk/s1600/3+Amazing+CSS3+Transitions.jpg">
</div>

CSS :

#cst {
 position:relative;
 height:281px;
 width:450px;
}
#cst img {
 position:absolute;
 left:0;
 -webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;
}
#cst img.top:hover {
 opacity:0;
}

Effect #2 :

Example :

HTML :

<div id="cst2" class="hover">
 <img class="bottom shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvuZ3J1PM7K0LLUojXi2BAILUKfr66tzZE-lvm7AJJ7A8nzPSE6yaXBhiqVrweNKCgqxJrlr1uaAK4RQmmvnuQYiY3cC62mxgYZYWXYqSvt4u1NXJ573wTRMMkveOvRfRtj8M1HYVwRE/s1600/Sites+Like+Google+Adsense.jpg">
 <img class="top shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxar6lVDuAu23qIScn7VVmKxao4WTVJN06z5rTtOPmXrT5DFuDpef5C2qaFNch3AgBPuBIgBAR2NNBQk_MeU9pLWSjvxT-TyOiNHdpZv-Ooy5YNXCf6LhQkBMPextlpAbHNQnCtk25osk/s1600/3+Amazing+CSS3+Transitions.jpg">
</div>

CSS :

#cst2 {
  position:relative;
  height:281px;
  width:450px;
 }
 #cst2 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;
 }
 #cst2 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;
 }
 #cst2:hover img.top, #cst2.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);
 }
 #cst2:hover img.bottom, #cst2.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);
 }

Effect #3 :

Example :

HTML :

<div id="cst3" class="hover">
 <img class="bottom shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvuZ3J1PM7K0LLUojXi2BAILUKfr66tzZE-lvm7AJJ7A8nzPSE6yaXBhiqVrweNKCgqxJrlr1uaAK4RQmmvnuQYiY3cC62mxgYZYWXYqSvt4u1NXJ573wTRMMkveOvRfRtj8M1HYVwRE/s1600/Sites+Like+Google+Adsense.jpg">
 <img class="top shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxar6lVDuAu23qIScn7VVmKxao4WTVJN06z5rTtOPmXrT5DFuDpef5C2qaFNch3AgBPuBIgBAR2NNBQk_MeU9pLWSjvxT-TyOiNHdpZv-Ooy5YNXCf6LhQkBMPextlpAbHNQnCtk25osk/s1600/3+Amazing+CSS3+Transitions.jpg">
</div>

CSS :

#cst3 {
  position:relative;
  height:281px;
  width:450px;
 
 }
 #cst3 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;
 }
 #cst3 img.top {
  -webkit-transform:scale(0,0);
  -moz-transform:scale(0,0);
  -o-transform:scale(0,0);
  transform:scale(0,0);
  opacity:0;
 }
 #cst3:hover img.top, #cst3.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;
 }
 #cst3:hover img.bottom, #cst3.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;
 }

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.