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='/image/01.jpg' />
</div>
<div class='img' id='img-2'>
<div class='mask'></div>
<img src='/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='/image/05.jpg' />
</div>
<div class='img' id='img-4'>
<div class='mask'></div>
<img src='/image/04.jpg' />
</div>
<div class='img' id='img-5'>
<div class='mask'></div>
<mg src='/image/06.jpg' />
</div>
<div class='img' id='img-6'>
<div class='mask'></div>
<img src='/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.
WordPress Designer
Jun 7th, 2012
I need with lightbox….
ABDUL HASEEB
Jun 9th, 2012
i want source file of this in which all things are embeded please!!!
pipi
Nov 25th, 2013
Ya same problem….
Joemel
May 5th, 2016
yaaaaa baby
Toasticuss
Feb 28th, 2014
This works fine with lightbox, just wrap the img tags in hrefs light you would with lightbox links.
Val
Jun 18th, 2012
It does not work under Firefox 13. Borders do not look like they have to.
Reyz
Jun 18th, 2012
because nikesh wrote -webkit-box-shadow:0px 0px 30px #ccc;
-webkit- means for safari and chrome only
if u want to see in firefox
change all -webkit- with -moz-
CMIIW
gagan
Jun 30th, 2012
nice awesome
Thilina
Jul 21st, 2012
can,t use position:fixed; style….. plz help
intelprotin4
Jul 25th, 2012
[...] Sexy Image Hover Effects using CSS3 [...]
Jer
Jul 30th, 2012
The sixth image won’t work. When I hover over it the background gets all messed up and the images started flashing. Can you please help?
nikesh
Sep 3rd, 2012
its too late ..but if you still have the same issue … please share your code with me ….
7个最新的使用jQuery及其CSS实现的悬浮特效 | CSSwang-CSS网站
Jul 31st, 2012
[...] Amazing Image Hover Effects with Webkit and CSS 3另外一个使用CSS3实现的悬浮特效。 Sexy Image Hover Effects using CSS3一个非常酷的CSS3实现的悬浮特效。拥有非常酷的展示方式。 Snazzy Hover [...]
denikian
Sep 3rd, 2012
awesome but i need with responsive Theme
CPC Studio
Sep 5th, 2012
Nice… i luv it.. do you have this code with responsive layout?
nikesh
Sep 5th, 2012
@denikian n @cpc …. guys you have to do it by your self ..
kapil
Sep 8th, 2012
Hey dude too cool
where from you learned these effects
murtaza
Sep 20th, 2012
Its not working with IE also
If one can modify with
filter:progid:DXImageTransform.Microsoft
It would be a great help
Akanksha
Sep 23rd, 2012
Is this htmls 5 supportive?
Dibyendu Layek
Sep 29th, 2012
excellent , thanks……
45+ Handy CSS3 Tools, Tutorials and Resources | Tekki Web Solutions Pvt. Ltd.
Sep 29th, 2012
[...] Browser Support ChecklistThis tool displays web browser support on HTML5 and CSS3.CSS3 TutorialsSexy Image Hover Effects using CSS3In this post artist is going to show to How to create a sexy css effect on image hover.This kinda [...]
Laure Jagow
Oct 2nd, 2012
Hey There. I found your blog using msn. This is an extremely well written article. I will be sure to bookmark it and return to read more of your useful information. Thanks for the post. I’ll definitely comeback.
shraddha
Nov 1st, 2012
Can you please tell me how could you use this in photo gallary which is build using UL and LI and not DIV
Dhananjay
Nov 6th, 2012
nice look & feel with CSS
chnadn kumar
Nov 13th, 2012
nice
Vidya
Nov 28th, 2012
Looks stunning.
I tried this, but its not working properly.
When the page gets loaded, all the images comes up one by one within seconds and then, above that a black background.
Thats it….
Wt 2 do ?
Handy CSS3 Tools, Tutorials and Resources : HueDesigner
Jan 5th, 2013
[...] Sexy Image Hover Effects using CSS3 [...]
10 CSS3 technology picture albums and slider sliding effect Web Page Design | Web Page Design Templates | Html5 Template
Feb 3rd, 2013
[...] Sexy Image Hover Effects using CSS3 [...]
7 个基于CSS/JavaScript的鼠标悬停效果教程 | jQuery精品集 - macapps.asia
Feb 6th, 2013
[...] 5. Sexy Image Hover Effects using CSS3 [...]
Nishant Joshi
Feb 25th, 2013
This effect is all messed up in IE.
Can’t use it.
:’(
David
Feb 26th, 2013
Hey, nice work! Thank you for taking the time and having the generosity to share your work. No complaints or questions here, only gratitude.
mmcsus
Mar 6th, 2013
Cool!
011012
Apr 2nd, 2013
thx
very nice, just what i need
10 Awesome Pure CSS3-Only Image Galleries & Sliders | AuntWeb
Apr 10th, 2013
[...] with only pure CSS3, this article will show you how. Image Slider With Pure CSS3 » View the Demo »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 [...]
Muhammad Kashif
Apr 15th, 2013
I would like to say that….simply awesome… hats off dude…..
maniraj
May 1st, 2013
Good..
12 Useful CSS3 Tutorials And Techniques For Web Designers
Jun 24th, 2013
[...] are again with 10 best and useful css3 Tutorials and technique for web designers.[re] [rss] [ad1]1) Image Hover Effects Using CSS32) Get Started With_CSS33) CSS3 Dropdown Menu4) 11 Classic CSS Techniques Made Simple With CSS35) [...]
40+ New Significant HTML5 And CSS3 Tips/Techniques/Tutorials | Multy Shades
Sep 13th, 2013
[...] Sexy Image Hover Effects using CSS3 [...]
HTML5 CSS3 Image galleries - Nilesh Shiragave PHP | Wordpress Expert
Jan 2nd, 2014
[...] Demo Download [...]
30 Tutorials to Help You Master CSS3
Jan 31st, 2014
[…] AMAZING IMAGE HOVER EFFECT […]
FERNANDO
Mar 17th, 2014
MUY BUENA ..LOS EFECTOS..PERO TENGO UN PEQUEÑO PROBLEMA..EN TODOS LOS NAVEGADORES..FUNCIONA..MENOS EN INTRNET EXPLORER..PUEDO SABER A QUE SE DEBE ESO..???
ashish
Apr 9th, 2014
thanks
very nice, just what i need
See more
Apr 15th, 2014
“Say, you got a nice blog post.Thanks Again. Really Cool.”
a
Jun 19th, 2014
This is my first time pay a visit at here and i am truly impressed to
read everthing at alone place.
abraham
Jul 15th, 2014
buena demo pero me interesaría que me pudieras mandar todo el css y html creado agradesco tu apoyo
Tutorials for learning about CSS Hover Effects | TechBlog
Sep 13th, 2014
[…] Hover Effects How to Create a Fast Hover Slideshow with CSS3 CSS Powered Buttons with Hover TooltipsSexy Image Hover Effects using CSS3Caption Hover […]
30 Best Tutorials and Plugins to Create Hover Effect in CSS3 - Xz webdesign
Oct 3rd, 2014
[…] 7.Sexy Image Hover Effects using CSS3 […]
Inspiration
Nov 16th, 2014
Simply awesome. Nice effects.
Оригинальные hover-эффекты для изображений на чистом CSS3 | Dobrovoimaster
Nov 25th, 2014
[…] ДемоДетали […]
Hover Effects | Hiệu ứng di chuột lên trên - YOEN GroupYOEN Group
Dec 1st, 2014
[…] [Demo] – [Tutorial] […]
Benergy Sam
Dec 9th, 2014
Very very useful for me thanks
45+ Handy CSS3 Tools, Tutorials and Resources - Taug13
Feb 13th, 2015
[…] Sexy Image Hover Effects using CSS3 […]
24个CSS3实例教程 | iCoding
Mar 23rd, 2015
[…] Sexy Image Hover Effects using CSS3 一个漂亮的图片悬停效果。 […]
Best 14 JQuery & CSS3 Hover Effects - Inspect Magazine
May 26th, 2015
[…] Demo Download […]
Image Hover Effect Tutorial For jQuery and CSS3 2 - DevsTrend
Jun 18th, 2015
[…] View Sourch […]
Оригинальные hover-эффекты для изображений на чистом CSS3 | ITC-LIFE
Nov 10th, 2015
[…] ДемоДетали […]