Blogspot Vision: Sexy Image Hover Effects using CSS3 for Blogger

Wednesday, March 9, 2011

Sexy Image Hover Effects using CSS3 for Blogger

CSS Code Snippet
This section code should be inserted before the closing head tag.

<style type='text/css'>
.img{
 -webkit-transform:scale(0.6);
 -moz-transform:scale(0.6);
 -o-transform:scale(0.6);
 float:left;
 margin-left:-20px;
 margin-right:-50px;
 margin-top:14px;
 -webkit-transition-duration: 0.5s;
 -moz-transition-duration: 0.5s;
 -o-transition-duration: 0.5s;
 }
.img img{
  padding:10px;
  border:1px solid #fff;
}
.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>

<style type='text/css'>
#container{
 width:100%;
 min-height:800px;
 background-color:#000;
}
a{
color: rgb(0, 114, 191); text-decoration: none; 
}
.heading{
 font-size:24px;
 color:#dfdfdf;
 text-align:center;
 padding-top:20px;
}

}
.clearfix{
 clear:both;
 float:none;
}
</style>

HTML Code Snippet
This section code should be inserted where you want the output to appear.

<div id='container'>

<div id='image-container'> 
    <div class='img' id='img-1'> 
     <div class='mask'></div> 
     <img src='http://www.blogspotvision.info/css/sexy-image-hover/images/black-yellow-lambo.jpg' /> 
    </div> 
    <div class='img' id='img-2'> 
     <div class='mask'></div> 
     <img src='http://www.blogspotvision.info/css/sexy-image-hover/images/bugatti.jpg' /> 
    </div> 
    <div class='img' id='img-3'> 
     <div class='mask' id='mask-1'></div> 
     <div class='mask' id='mask-2'></div> 
     <img src='http://www.blogspotvision.info/css/sexy-image-hover/images/cadillac.jpg' /> 
    </div> 
    <div class='img' id='img-4'> 
     <div class='mask'></div> 
     <img src='http://www.blogspotvision.info/css/sexy-image-hover/images/ferrari-red.jpg' /> 
    </div> 
    <div class='img' id='img-5'> 
     <div class='mask'></div> 
     <img src='http://www.blogspotvision.info/css/sexy-image-hover/images/jaguar.jpg' /> 
    </div> 
    <div class='img' id='img-6'> 
     <div class='mask'></div> 
     <img src='http://www.blogspotvision.info/css/sexy-image-hover/images/koenig.jpg' /> 
    </div> 
    <div class='clearfix'></div> 
   </div> 
  <div class='clearfix'></div> 
   <br/></div>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)