Sexy Image Hover Effects using CSS3
by nikesh on 11/05/10 at 6:20 pm
First of all thanks to giving me a great response on Ajax Style Loading Animation in CSS3 ( no Images ) .
In this post I am going to show to How to create a sexy css effect on image hover.This kinda effect you have seen before in Flash or in javascript as well.But why use Flash or js when CSS can do the same work.So lets do it …
Below I have attached the snapshot , to view the original output please visit DEMO.
Now let go through the code.
HTML
<div class='img' id='img-1'> <div class='mask'></div> <img src='http://www.nikesh.me/image/01.jpg' /> </div> <div class='img' id='img-2'> <div class='mask'></div> <img src='http://www.nikesh.me/image/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://www.nikesh.me/image/05.jpg' /> </div> <div class='img' id='img-4'> <div class='mask'></div> <img src='http://www.nikesh.me/image/04.jpg' /> </div> <div class='img' id='img-5'> <div class='mask'></div> <mg src='http://www.nikesh.me/image/06.jpg' /> </div> <div class='img' id='img-6'> <div class='mask'></div> <img src='http://www.nikesh.me/image/08.jpg' /> </div>
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.
grenlibre
May 11th, 2010
Hi nice demo,
but it only works on webkit, not opera or firefox. CSS3 Transitions works on Firefox 3.7+, Opera 10.50+ .
To fix the compatibility, you can use -moz- and -o- property like here : http://blog.grenlibre.fr/2010/05/css3-transitions-available-on-firefox-3-7
Regards
Portnull
May 11th, 2010
AWESOME!
Philipp von Weitershausen
May 11th, 2010
This is a nice demo! Note that Firefox also supports CSS transformations (-moz-transform*) since version 3.5 and supports transitions (-moz-transition*) on the trunk (3.7 alpha). See https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
Alex
May 16th, 2010
wow…firefox now sounding like internet explorer. sad you have to do something particularly to debug firefox. Why can’t all these companies get on board and stay on board the standards train?
Arcane
Jun 30th, 2010
LOL. Bear in mind that these effects are possible on Webkit thanks to the -webkit prefix because these effects are NOT standard. These companies are offering pre-standards methods for including them. Once w3 finalizes their usage, webkit and gecko browsers will probably switch over.
David B.
Jul 1st, 2010
You’re trolling, right Alex? Webkit does the exact same thing Mozilla Gecko does. Webkit uses -webkit and Gecko uses -moz (while we’re at it, Opera’s Presto uses the -o prefix).
Mae
Aug 8th, 2010
That’s weird, I tried using -moz-transition* but it didn’t work on me. I read in the documentation that it will be implemented in Firefox 4
Mike
May 11th, 2010
One all major browsers support CSS3 life for web designers is going to be a lot easier. These effects are great!
Steve jobs is full of shit
May 11th, 2010
If building a simple effect like this is such a big deal using non-flash thingies, imagine building 3D sites in js!
Cross browser compatibility is a bitch and it will ensure that Flash will survive for a long long time. Anyone tried running simple html5 demos on iPad. That pad cant.Steve jobs is full of shit!
Chris Alford
May 12th, 2010
How dumb are you!
Anyone in this business knows how much a pain cross browser coding is. Flash was a good tool back in the Macromedia days, but it is buggy, insecure and for the designers it was originally built for, difficult to program in.
HTML 5 is a big step in the right direction, the iPad is a huge leap in personal computing.
If you want to stay employed learn something new and keep your bigoted personal opinions to yourself.
Lukasz Langa
May 11th, 2010
Very cool but… how are you supposed to see a hover effect on the iPhone?
Chris Alford
May 12th, 2010
I think you know the iPhone doesn’t have a hover state.
But you can always try something like this:
http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/
nikesh
May 12th, 2010
hey .. that is cool … thanks for sharing this article Chris ….
Netcrema – creme de la social news
May 11th, 2010
[...] Sexy Image Hover Effects using CSS3 | Nikesh Hayaran’s Blognikesh.me [...]
dave
May 11th, 2010
Works on the Droid incredible fwiw.
tjoozey
May 11th, 2010
[...] full post on Hacker News If you enjoyed this article, please consider sharing it! Tagged with: Beautiful [...]
=== popurls.com === popular today
May 11th, 2010
=== popurls.com === popular today…
yeah! this story has entered the popular today section on popurls.com…
Popular Links : eConsultant
May 11th, 2010
[...] the original post: Sexy Image Hover Effects using CSS3 | Nikesh Hayaran’s Blog 11 May 2010 | Uncategorized | Trackback | del.icio.us | Stumble it! | View Count : 0 Next Post [...]
macoteca
May 11th, 2010
Great FX. If Explorer 6 (the first step) disappears Internet is going to be faster: rounded corners, fx, layers, fontface… CSS3 rocks and works really fast to make some stuffs.
Thanks for the post, I like it.
Jimmy Bradford
May 12th, 2010
Some good stuff there. I like the little dark grey overlay sort of thing that also animates while the selected image is growing. I think we’re going to be using a few of these techniques to spice up the site when http://www.dirtyphonebook.com gets photos in order to minimize bandwidth with horrible (IMO) flash solutions. I just wish there was a little more IE support though but we’re doing good with getting modern browser users so that’s not a crazy large concern. Good writeup and demo nikesh!
nikesh
May 12th, 2010
@ All …. a very big thanks to all of my readers…. nd I also appreciate those who put their suggestions here ..
@jimmy … thanks man … I always tried to give some thing new to my readers ,,,, hope in future, you ll get some more useful article here which you can use for your website …
Neil
May 12th, 2010
Good effect. Some of these commenters are kidding themselves if they think something like this will be a viable option (outside of the mobile web) within the next 5 years.
mantiddesign
May 12th, 2010
[...] Sexy Image Hover Effects using CSS3 [...]
links for 2010-05-14 « 個人的な雑記
May 15th, 2010
[...] Sexy Image Hover Effects using CSS3 – nikesh.me (tags: css3 webdesign) [...]
Utwo
May 16th, 2010
Hey nice tutorial.You have a little problem with cursor:pointer.
Richie
May 16th, 2010
This is excellent work.. Nicely done Nikesh!!
nikesh
May 16th, 2010
@Richie …. thanks a lot richie ….
Jacob
May 17th, 2010
Looks and works great on tap when using my g1.
Sexy Image Hover Effects usando CSS3 | AlyenStudio, designer de outro mundo !
May 17th, 2010
[...] artígo nosso amigo do site nikesh encina como criar um efeito css sexy quando fazemos hover em alguma imagem. Você pode ter visto [...]
jeienne
May 18th, 2010
It’s nice. But i wish to put in main page of my preparing site with wordpress, how to do, please some get me know.
Thanks.
WebTeam » CSS hover effects
May 18th, 2010
[...] use of css/javascript transitions for hover effects. Continue reading » · Written on: 05-18-10 · No Comments [...]
[User Link:Sexy Image Hover Effects using CSS3] | Tips for Designers and Developers | tripwire magazine
May 26th, 2010
[...] Sexy Image Hover Effects using CSS3 [...]
liukaitian
Jun 9th, 2010
很棒的效果,值得支持
10 Pure CSS3 Image Galleries and Sliders - Speckyboy Design Magazine
Jun 9th, 2010
[...] Sexy Image Hover Effects using CSS3 [...]
” 10+纯CSS3图像画廊和滑块– HTML5,CSS3,WEB前端设计开发资讯站
Jun 9th, 2010
[...] Sexy Image Hover Effects using CSS3 [...]
10 Pure CSS3 Image Galleries and Sliders | crazyegg.net
Jun 11th, 2010
[...] Sexy Image Hover Effects using CSS3 In this post you are going to be shown how to create a sexy CSS3 effect on image hover. This kind of effect is usually built with Flash or Javascript, but why use Flash or js when CSS can do the same work. Sexy Image Hover Effects using CSS3 » View the Demo » [...]
May’s Best Resources for CSS3
Jun 11th, 2010
[...] 10. Sexy Image Hover Effects using CSS3 [...]
What CSS3 Can Do For You: Streamlining Buttons and Imagery Transitions | AEXT.NET MAGAZINE
Jun 15th, 2010
[...] [...]
Best Tutorials for Web Development » Blog Archive » What CSS3 Can Do For You: Streamlining Buttons and Imagery Transitions
Jun 16th, 2010
[...] HTMl5 and CSS3 and cut out javascript and Flash all together. A demo of how this works is located here, although again it works best in Chrome and [...]
8 gallery e sliders in CSS3
Jun 17th, 2010
[...] Sexy Image Hover Effects using CSS3 [...]
Start Using CSS3 Today: Techniques and Tutorials - Smashing Magazine
Jun 17th, 2010
[...] [...]
Start Using CSS3 Today: Techniques and Tutorials | Web Design Cool
Jun 17th, 2010
[...] Sexy Image Hover Effects using CSS3 This post shows how to create a sexy CSS effect on image hover. [...]
Start Using CSS3 Today: Techniques and Tutorials | Creative Man Studio
Jun 18th, 2010
[...] [...]
10 Pure CSS3 Image Galleries and Sliders | Off Topic Design
Jun 19th, 2010
[...] Sexy Image Hover Effects using CSS3 [...]
64 CSS3 Tutorials & Techniques | Digital Pizza
Jun 19th, 2010
[...] Sexy Image Hover Effects using CSS3 This post shows how to create a sexy CSS effect on image hover. [...]
vnwordpress » Blog Archive » Giới thiệu CSS3
Jun 20th, 2010
[...] Sexy Image Hover Effects using CSS3 [...]
Giới thiệu CSS3 | vnwordpress
Jun 21st, 2010
[...] hiệu ứng khi áp dụng cả 2 kỹ thuật này. Animated Photoshop selection using CSS3 Sexy Image Hover Effects using CSS3 CSS3 Dropdown Menu Middle Box Links Contextual Slideout Tips With jQuery & CSS3 CSS3 [...]
Giới thiệu CSS3 | vnwordpress
Jun 21st, 2010
[...] Sexy Image Hover Effects using CSS3 [...]
What CSS3 Can Do For You: Streamlining Buttons and Imagery Transitions | KITORY
Jun 22nd, 2010
[...] HTMl5 and CSS3 and cut out javascript and Flash all together. A demo of how this works is located here, although again it works best in Chrome and [...]
Start Using CSS3 Today: Techniques and Tutorials | i know idea
Jun 22nd, 2010
[...] Sexy Image Hover Effects using CSS3 This post shows how to create a sexy CSS effect on image hover. [...]
Start Using CSS3 Today: Techniques and Tutorials | ZoooZu.com
Jun 23rd, 2010
[...] Sexy Image Hover Effects using CSS3 This post shows how to create a sexy CSS effect on image hover. [...]
Giới thiệu CSS3 | VNWordPress.com
Jun 26th, 2010
[...] Sexy Image Hover Effects using CSS3 [...]
erwt
Jun 27th, 2010
supperrr
TOPGFX » Blog Archive » 20 Shocking CSS3 Techniques
Jul 5th, 2010
[...] Sexy Image Hover Effects using CSS3 [...]
soulkillr
Jul 6th, 2010
Awesome.
Chrome 5+ perfect.
Linux, BTW!
Cody Swann
Jul 7th, 2010
Great tut.
I think there is a bit of non-semantics going on, but I understand the need.
Throw modernizr in there and just remove the mask for non-transition browsers
.no-transitions .mask {
…
}
11 Photo Galleries με CSS3 « Web Resources
Aug 5th, 2010
[...] Δείτε το Demo [...]
Μαθηματα joomla
Jul 6th, 2015
[...] Sexy Image Hover Effects using CSS3 [...] ha ha ah
11 Photo Galleries Made by the Awesome CSS3 « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates
Aug 6th, 2010
[...] Sexy Image Hover Effects [...]