Ravi Saive: A Technology Blog For Newbies

In this post I will going to show you'll how to create a awesome 6 CSS3 image hover effects. I think you have seen these kind of image hover effects using Flash or JavaScript as well. But you can get the same hover effects using latest CSS3 techniques without the need of any code. I have attached the demo link below. Let's have a look at the each image and see how hover effects are working. I have also provided the code for this CSS3 effects below, so you can add these codes in your blog or website to give some attractive looks to all your images.

CSS3 Image Hover Effects Preview

CSS3 Image Hover Effects Demo

Live Demo

CSS Code

<style>
.img{
 -webkit-transform:scale(0.6);
 -moz-transform:scale(0.6);
 -o-transform:scale(0.6);
 float:left;
 margin-left:-50px;
 margin-right:-50px;
 margin-top:-10px;
 -webkit-transition-duration: 0.5s;
 -moz-transition-duration: 0.5s;
 -o-transition-duration: 0.5s;
 
 }
.img img{
  padding:10px;
  border:1px solid #fff;
  width:400px;
 height:225px;
}
.img:hover{
 -webkit-transform:scale(0.8);
 -webkit-box-shadow:0px 0px 30px #ccc;
 -moz-transform:scale(0.8);
 -moz-box-shadow:0px 0px 30px #ccc; 
 -o-transform:scale(0.8);
 -o-box-shadow:0px 0px 30px #ccc; 
}  
.img .mask{
 width: 100%;
 background-color: rgb(0, 0, 0);
 position: absolute;
 height: 100%; 
 opacity:0.6;
 cursor:pointer;
 -webkit-transition-duration: 0.5s;
 -moz-transition-duration: 0.5s;
 -o-transition-duration:0.5s;
}
#img-1:hover .mask{
 height:0%; 
}
#img-2:hover .mask{
 height:0%; 
 margin-top:130px;
}
#img-4:hover .mask{
 margin-left:219px;
 margin-top:135px;
 height:0%;
 width:0%;
}
#img-3 #mask-1 {
 width:50%;
}
#img-3 #mask-2{
 width:50%;
 margin-left:211px;
}
#img-3:hover #mask-1{
 width:0%;
}
#img-3:hover #mask-2{
 margin-left:430px;
 width:0%;
}
#img-5:hover .mask{
 margin-left:219px;
 margin-top:135px;
 height:0%;
 width:0%;
 -webkit-transform: rotateX(360deg);
 -moz-transform: rotate(360deg);
 -o-transform: rotate(-360deg);
}
#img-6:hover .mask{
 margin-left:219px;
 margin-top:135px;
 height:0%;
 width:0%;
 -webkit-transform: rotateZ(750deg);
 -moz-transform: rotateZ(750deg);
 -o-transform: rotat(750deg);
}
</style>

HTML Code

<div id='image-container'>
    <div class='img' id='img-1'>
     <div class='mask'></div>
     <a target="_blank" href="http://www.hqwallpaper.in/2012/03/amazing-asian-babe.html"><img src='http://3.bp.blogspot.com/-_ec5iYVk1zI/T1eBHBLrDVI/AAAAAAAAV7k/sILa7Pya9jI/s320/Amazing-Asian-Babe-by-hqwallpaper.in.jpg' /></a>
    </div> 
    <div class='img' id='img-2'>
     <div class='mask'></div>

     <a target="_blank" href="http://www.hqwallpaper.in/2012/03/love-in-action.html"><img src='http://3.bp.blogspot.com/-uWSQ0i4xmTg/T1eDFMoC2uI/AAAAAAAAV8k/SzU4cbRRP18/s320/Love-In-Action-by-hqwallpaper.in.jpg' /></a>
    </div> 
    <div class='img' id='img-3'>
     <div class='mask' id='mask-1'></div>
     <div class='mask' id='mask-2'></div>
     <a target="_blank" href="http://www.hqwallpaper.in/2012/03/london-bridge-evening.html"><img src='http://1.bp.blogspot.com/-Qgso-mMLB24/T1eC3NomVRI/AAAAAAAAV8c/Gzo_tQRyIuI/s320/London-Bridge-Evening-by-hqwallpaper.in.jpg' /></a>
    </div> 
    <div class='img' id='img-4'>
     <div class='mask'></div>
     <a target="_blank" href="http://www.hqwallpaper.in/2012/03/green-ocean-holiday.html"><img src='http://1.bp.blogspot.com/-XPujdPc4uxM/T1eCZydJ3eI/AAAAAAAAV8M/DR4XkfIOLaI/s320/Green-Ocean-Holiday-by-hqwallpaper.in.jpg' /></a>

    </div> 
    <div class='img' id='img-5'>
     <div class='mask'></div>
     <a target="_blank" href="http://www.hqwallpaper.in/2012/03/beautiful-girl-with-nature.html"><img src='http://1.bp.blogspot.com/-GvzU8QaNK9I/T1eBsrU7a9I/AAAAAAAAV70/18nv16scTKo/s320/Beautiful-Girl-With-Nature-by-hqwallpaper.in.jpg' /></a>
    </div> 
    <div class='img' id='img-6'>
     <div class='mask'></div>
     <a target="_blank" href="http://www.hqwallpaper.in/2012/03/greeny-apple-smashing.html"><img src='http://4.bp.blogspot.com/-V_f_5a9j3ak/T1eCpBj9y0I/AAAAAAAAV8U/neufQUaseWo/s320/Greeny-Apple-Smashing-by-hqwallpaper.in.jpg' /></a>
    </div> 
    <div class='clearfix'></div>

   </div>
  <div class='clearfix'></div>

All credit goes to designstutorial.com. Hope you guys like these best six image hover effects. Please don’t forget to drop your feedbacks using comment section.