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.
Ramachandran
Aug 21st, 2010
Great Work…. Nice Demo…
Keep Rocking…
nikesh
Aug 21st, 2010
@Ram … Thanks Buddy..
FaceWord - Techniques Commencez à utiliser CSS3 Aujourd’hui: et didacticiels
Aug 26th, 2010
[...] Sexy Image Effets Hover utilisant CSS3 Ce post montre comment créer un effet sexy CSS hover sur l’image. [...]
Nilesh
Aug 30th, 2010
really nice work!!
Petty
Sep 3rd, 2010
Awesome!
11个由很酷的CSS3制作的图片画廊 | 我爱互联网|woiweb|专注互联网设计与开发
Sep 5th, 2010
[...] Sexy Image Hover Effects [...]
11个由很酷的CSS3制作的图片画廊 « 零博客
Sep 9th, 2010
[...] Sexy Image Hover Effects [...]
11个由很酷的CSS3 制作的图片画廊 | ǒ華山论劍のWeb开发
Sep 13th, 2010
[...] Sexy Image Hover Effects [...]
Ultimate Collection of CSS3 Tutorials and Techniques – AE Tuto
Sep 21st, 2010
[...] Image Hover Effects Using CSS3 [...]
rickzwebz
Sep 25th, 2010
Nice effects. I will try to adapt this for some of my sites. Thanks.
July’s Best Resources for CSS3 | Web Design Blog
Sep 26th, 2010
[...] now We all have seen lots of image effect developed in CSS3 like Sexy Image Hover Effects. But today I am going to show a very different image effect using only CSS3.Previously this kind of [...]
60 Awesome Tutorials, Tricks, and Tools that will Make You a CSS Master | Tech King
Sep 27th, 2010
[...] 48.Sexy Image Hover Effects using CSS3 [...]
CSS3でアニメーション「Transition」 - BlackFlag – Web Development Technical
Oct 8th, 2010
[...] ≫Sexy Image Hover Effects using CSS3 – nikesh.me [...]
24个CSS3实例教程 | 我要编程
Oct 8th, 2010
[...] Sexy Image Hover Effects using CSS3 一个漂亮的图片悬停效果。 [...]
Start Using CSS3 Today: Techniques and Tutorials | Best Web Magazine
Oct 20th, 2010
[...] [...]
tommy
Dec 2nd, 2010
It’s beautiful. will try it
Collection Of Best CSS3 Image Galleries | Free Resources for Designers & Developers
Dec 2nd, 2010
[...] View Article [...]
Elijah
Dec 13th, 2010
Thanks! Nice Effects, Any hack for IE and Mozilla ?
38 Best CSS3 Tutorials and Techniques Of Year 2010
Dec 30th, 2010
[...] = "0704558884"; google_ad_width = 300; google_ad_height = 250; 1) Introduction-to-css32) Image Hover Effects Using CSS33) Get Started With_CSS34) CSS3 Dropdown Menu5) 11 Classic CSS Techniques Made Simple With CSS36) [...]
Bloons Man
Jan 16th, 2011
Very nice effect. Will work excellently on my game blog.
11个非常棒的CSS3实现的图片展示效果 « 半神网
Jan 31st, 2011
[...] Sexy Image Hover Effects [...]
Varsha
Feb 19th, 2011
I’ve used sexy image hover effect in my project, and it is working superb.. thanx for uploading this.. it’s wonderful and helped me a lot.
Will
Feb 28th, 2011
Well done, looks very sleek..
Phillip
Mar 9th, 2011
truly sexy, indeed..
ryan
Mar 16th, 2011
Not work in IE8 and IE7 but anyway is helpful..
good work.
28 Tutorials on Innovative Animations Made with CSS3 | blueblots.com
Mar 19th, 2011
[...] In this tutorial, you will use CSS transform transition and CSS features to rotate the image by just clicking the small image. Visit Site [...]
rax
Mar 20th, 2011
hey diude !
it is just awesome !!
and light weight also !
thanks a lot !
Jeremy
Mar 25th, 2011
nice effect! by the way, check your on the top-level of the site.
Jeremy
Mar 25th, 2011
title tag, it says ‘protfolio’.
Ramaraju Ramakanth
Mar 26th, 2011
Great Work..
mj
Mar 30th, 2011
Awesome man. Nice tips. Thanks ya.
kopiteAvi
Apr 7th, 2011
lovin’ it….superb…awesum!!
veeresh
Apr 13th, 2011
It’s very fantastic………..
sv kumar
May 4th, 2011
super….
cellunlock
May 5th, 2011
http://www.nikesh.me is full of interesting posts!
Dot Bushman
May 22nd, 2011
I love this stuff….just wish I knew how to use it.
Yes….I’m not a developer.
11款非常棒的CSS3图片展示效果
May 29th, 2011
[...] Sexy Image Hover Effects [...]
li
Jun 6th, 2011
works on opera browser, too
Lathe
Jun 16th, 2011
This is a extremely fascinating post, thank you for sharing! There are many blogs on this topic but this 1 states exactly what I believe also.
daus
Jun 18th, 2011
this is what i looking for, thanks
55 Best CSS3 Tutorials 2011 | Web Development | iDesignow
Jul 12th, 2011
[...] Sexy Image Hover Effects using CSS3 [...]
150+ CSS3 tutorials and exercises for web developers « «Design and Development tuts - TutorialShock Design and Development tuts – TutorialShock
Jul 23rd, 2011
[...] Sexy Image Hover Effects using CSS3 [...]
batterie e percussioni
Jul 23rd, 2011
Fine piece! Prefer was pleased with the particular checking out. I’m hoping to enjoy a book significantly more of your stuff. There’s no doubt you can have fine observation not to mention perspective. We’re significantly happy from this knowledge.
24个CSS3实例教程 | 我爱HTML5
Jul 24th, 2011
[...] Sexy Image Hover Effects using CSS3 一个漂亮的图片悬停效果。 [...]
CSS3 tutorials, 150+ exercises for web developers
Jul 26th, 2011
[...] Sexy Image Hover Effects using CSS3 [...]
rajesh kumar
Jul 26th, 2011
very nice….
150+ CSS3 tutorials and exercises for web developers - DesignShock
Jul 26th, 2011
[...] Sexy Image Hover Effects using CSS3 [...]
109 interesantes tutoriales y recursos CSS3 | Digisolnet Blog
Jul 30th, 2011
[...] Imagen con efectos hover con CSS3 [...]
chins
Aug 3rd, 2011
it wont work in IE7,IE8.Then Is it work in firefox?
WebVitaminz 10 Incredible CSS3 Sliders and Image Galleries
Aug 7th, 2011
[...] View the Demo | Sexy Image Hover Effects using CSS3′s Details [...]
5 Galerias de Imagenes en CSS3 < | qazuor.com
Aug 8th, 2011
[...] Sexy Image Hover Effects using CSS3 [...]