Sexy Image Hover Effects using CSS3

CSS\Tutorials

Sexy Image Hover Effects using CSS3

By | May 6, 2011 at 4:32 am | 11 comments

Today, we are going to show to How to create a sexy image hover effect with css..You have seen this kind of effect in Flash or in javascript as well. But if CSS can do the same work, why use Flash or js. So lets do it …
Below I have attached the snapshot , to view the original output please visit DEMO page.

{focus_keyword} Sexy Image Hover Effects using CSS3 CSS3 image hover
Now let go through the code.

HTML

<div class='img' id='img-1'>
 <div class='mask'></div>
 <img src='http://designstutorial.com/wp-content/uploads/2011/05/01.jpg' />
</div>
<div class='img' id='img-2'>
 <div class='mask'></div>
 <img src='http://designstutorial.com/wp-content/uploads/2011/05/07.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://designstutorial.com/wp-content/uploads/2011/05/05.jpg' />
</div>
<div class='img' id='img-4'>
 <div class='mask'></div>
 <img src='http://designstutorial.com/wp-content/uploads/2011/05/04.jpg' />
</div>
<div class='img' id='img-5'>
 <div class='mask'></div>
 <mg src='http://designstutorial.com/wp-content/uploads/2011/05/06.jpg' />
</div>
<div class='img' id='img-6'>
 <div class='mask'></div>
 <img src='http://designstutorial.com/wp-content/uploads/2011/05/08.jpg' />
</div>

sexy image, sexy image, sexy image, sexy image, sexy css3, sexy css3, sexy css3
CSS

.img{
 float:left;
 -webkit-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;
}
.img .mask{
 width: 100%;
 background-color: rgb(0, 0, 0);
 position: absolute;
 height: 100%;
 opacity:0.6;
 cursor:pointer;
 -webkit-transition-duration: 0.5s;
}
#img-1:hover .mask{
 height:0%;
}
#img-2:hover .mask{
 height:0%;
 margin-top:130px;
}
#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-4:hover .mask{
 margin-left:219px;
 margin-top:135px;
 height:0%;
 width:0%;
}
#img-5:hover .mask{
 margin-left:219px;
 margin-top:135px;
 height:0%;
 width:0%;
 -webkit-transform: rotateX(360deg);
}
#img-6:hover .mask{
 margin-left:219px;
 margin-top:135px;
 height:0%;
 width:0%;
 -webkit-transform: rotateZ(750deg);

 

To view the original output please visit DEMO.
Hope you guys like these effects.Please don’t forget to drop your comments.
.sexy image css hover effect, sexy image css hover effect, sexy image, sexy image, sexy image

Tags:

11 Comments

  1. Bob (1 year ago)

    looks good, but when applied for one pic only works oposite .. Instead zoom in, zoom out and whole mask bg is disturbing with each move of mouse ;) But respect anyway, hombre, keep going!

  2. Beben Koben (2 years ago)

    awesome my friend…it’s full stylish…
    on variable .img .mask we can just used background-color: rgba(0, 0, 0, 0.5)
    that’s same with opacity variable….

  3. Social media tips (2 years ago)

    Amazing technology development in CSS. but it’s allow only mozilla, chrome and etc browsers except internet explorer. this same css working in IE really happy to apply this css. by anand

    • designswonder (2 years ago)

      You must go through this article to understand which effects and transitions are supported by IE browser. These effects are created with Pure CSS3 technique. If you want to apply the same effects and want to see them working in IE also, then I would recommend you to go with jQuery. It is fast, cross-browser compatible and you can do what you want.

  4. Lonny Guieb (2 years ago)

    Extremely great content. I actually basically became aware of your blog site and desired to tell you that I’ve quite liked looking through your blog and reports. Nonetheless I’ll be following your feed and I hope to browse your blog again.

  5. 10 best web hosting (2 years ago)

    Excellent post. I was checking constantly this blog and I am impressed! Extremely useful information specifically the last part :) I care for such info a lot. I was looking for this certain info for a very long time. Thank you and good luck.

  6. Febin (2 years ago)

    this is awesome, thanks …

  7. ChesterJulie (2 years ago)

    Nice to see CSS3 put to use!This tutorial will no doubt help a lot of people to experiment with their site! Thanks for sharing, I’ve bookmarked it :)

  8. Sudo (2 years ago)

    You are a big man! Thanks for this (as always great) stuff

  9. GreenBot (2 years ago)

    This tutorial helped me with a website I am designing, thanks a lot!

  10. Alicia (2 years ago)

    I am amazed and shocked that these effects are only with Pure CSS3… It means, its time to say good bye to JS and flash. Use CSS3 and you'r done with it.
    But a little disappointment is that it's not working it IE(Any verison).
    Hopefully this will be fixed sooner by MS…
    All-in-all, Great post.

Comments

*