So here we will try to create fancy image hover with css3 as you all know we can have cool image hover effect using jquery but now using transform and transition properties of css3 we can have the same cooler effect with css3 only.
Check Out Demo First (Works in Safari and Chrome only)
HTML
In html elements we need one container for image which holds the image along with the layer which would come on the top of image. So here we will first define a class images and id arrt. as image1 and now under this element there are two more elements one the layer and one image. So this way write html elements for all images.
<div class='images' id='image1'> <div class='layer'></div> <img src='baby.jpg' /> </div> <div class='images' id='image2'> <div class='layer'></div> <img src='baby.jpg' /> </div> <div class='images' id='image3'> <div class='layer'></div> <img src='baby.jpg' /> </div> <div class='images' id='image4'> <div class='layer'></div> <img src='baby.jpg' /> </div>
CSS3
Here we will first use Transform property of css3 just to scale the image to smaller first when page loads and then on hover we will increase its size to larger than the previous one. Now here we will also use Transition Duration property to half second to perform the transform animation. That is on hover the image takes half second to animate from smaller size to bigger size. We also need to clear the layer which was on the top of all images, so as soon as cursor hover on any image we need to remove the layer mask from it in cooler way. To do this we will use Transition Duration property which will set the time duration for layer to remove from the image. Now will individually set different properties on layer so that we will get different hover effect on each images. Check out the below CSS3 Codes for more clarification.
.images{ float:left; margin-left:-20px; margin-right:-20px; margin-top:10px; -webkit-transform:scale(0.6);/*Initial size of image when page loads*/ -webkit-transition-duration: 0.5s;/*Time taken for image to animate from smaller size to bigger size*/ } .images:hover{ -webkit-transform:scale(0.8);/*When hover on images image size will increased*/ -webkit-box-shadow:0px 0px 40px #ccc; } .images .layer{ width: 100%; height: 100%; background-color:#000; position: absolute; opacity:0.5; -webkit-transition-duration: 0.8s; } #image1:hover .layer{ width:0%; } #image2:hover .layer{ height:0%; } #image3:hover .layer { height:0%; margin-top:150px; } #image4:hover .layer{ margin-left:150px; margin-top:150px; height:0%; width:0%; }
Ensure your 100% success by using our incredible best web hosting study packages. We are providing the best 642-681 and 70-270 training solutions for final exam preparations of pass4sure 70-272. You can also get hp certification free if you download all the dumps.
[...] This post was mentioned on Twitter by prakash ghodke, Alcides Ramos. Alcides Ramos said: Fancy Image Hover Using CSS3 | Web Designers Desk http://bit.ly/d7Paff [...]
This is amazing. I really want to start implementing this new coding immediately. When will all of the browsers support CSS3?
[Reply]
Jake Noble Reply:
June 25th, 2010 at 12:39 pm
Who knows! But one thing is for certain be prepared to write specific code and/or hacks for IE
[Reply]
Works well in Firefox 3.7A6 too. Great job with the transitions.
[Reply]
Works perfectly fine in Firefox.
[Reply]
I’m using Firefox (v 3.6.3) and it works here, too.
[Reply]
Dylan Reply:
June 21st, 2010 at 8:08 pm
What you’re seeing in Firefox isn’t as fancy as what you see in Safari/Chrome.
[Reply]
Jeff Reply:
June 25th, 2010 at 7:20 pm
I’m using Firefox 3.6.4 and it works fine here too!
[Reply]
Nice work. One of the most useful examples of transitions and transforms I’ve seen yet.
[Reply]
So, from a user interface standpoint, you’re delaying a simple picture display with 3 seconds of a 80’s era video wipe effect.
Congratulations! You have added 12 seconds of hate-debt to this web page!
How about something that _adds_ to the user experience, vs. making it dance?
[Reply]
Chrome works perfectly. internet exploder demolishes it.
Very nice effect.
[Reply]
And fine too in Chrome 5.0!
[Reply]
It works in Firefox, but try it in Chrome and Safari and you will see the animation effects on it.
Great stuff this, and its even starting to make Javascript obscolete. Hopefully CSS3 and HTML 5 is going to be adopted by all the browsers and soon.
[Reply]
Also works on Firefox 3.6.4 and Opera 10.53 Please update.
[Reply]
Very nice effect
[Reply]
Good also in Opera 10.5 and 10.6 (the best).
[Reply]
works even in Opera 10.54
[Reply]
[...] Fancy Image Hover Using CSS3 | Web DesignÂers Desk [...]
The people using Firefox 3.6.6 need to open up Chrome and see what they’re missing. It gracefully degrades to “work” in Firefox 3.6, but doesn’t have the same animated effects.
It’s really amazing in Chrome. Very clever effects.
[Reply]
its work too on FF 3.6
[Reply]
@firefox users : Only zoom works in Firefox, not the really cool transitions effects.
Anyway, great job!
[Reply]
Firefox desgrades the transition very well…..
[Reply]
Yes, it works in FireFox.
But it’s toooo slow.
[Reply]
Don’t wait for support. Use CSS 3 now! Gracefully degrade for the crap browsers. Don’t limit your sites by their inadequacies!
[Reply]
@Firefox folks … re-check it in Safari or Chrome and you’ll see what it means “works only in Safari or Chrome”. In FF till 3.6 it doesn’t work as intented … only a fallback.
[Reply]
Also works on Opera 10.50+
[Reply]
[...] This post was Twitted by mathboina [...]
Firefox doesn’t have the webkit trasitions
However, it still looks fine
[Reply]
[...] Fancy Image Hover Using CSS3 | Web Designers Deskwebdesignersdesk.com [...]
Great effect. Obviously the transitions don’t work in Firefox, but it looks really nice in webkit-based browsers! Like the fact that you’ve got a couple of extra transitions in there too!
[Reply]
FYI this works fine in Opera 10.54 too.
[Reply]
Don’t older browsers need the width and heioght set in the HTML img tag? If so, how can we make this code backwards compatible for older browsers? Can the -webkit-transform:scale(0.6) overwrite the width and height set in the HTML?
[Reply]
that good … my idea is used by some one..
[Reply]
Works great on Google Chrome v5.. well done!
[Reply]
I am confused. You guys are saying it works in FF 3.6.3? I am on a PC, with version 3.6.4, and it does NOT work.
[Reply]
Works perfectly (as it can’t be otherwise) with the latest Opera builds (10.53/10.60)
Real nice work.
[Reply]
thats pretty cool! simple too!
BTW it also works with Opera 10.64 for Mac.
[Reply]
FYI to the FireFox commentors – What works in FireFox is the image getting larger when selected, the nice transitions aren’t there though. If you compare the FF 4.6 to Chrome, you’ll see what FF is missing.
[Reply]
i m using it it works on goggle chrome
[Reply]
[...] Link: http://webdesignersdesk.com/2010/06/fancy-image-hover-using-css3/ [...]
[...] Fancy Image Hover Using CSS3 [...]
[...] Fancy Image Hover Using CSS3 [...]
[...] Micro-Optimize Your CSSCSS3 Minimalistic Navigation MenuCSS3 Flying MenuScrollTo Posts With jQueryFancy Image Hover Using CSS3iPhone Style Checkboxes With CSS3GrooveShark Search with CSS3Create an Advanced Contact Form for [...]
[...] Fancy Image Hover Using CSS3 [...]
[...] Fancy Image Hover Using CSS3 [...]
[...] 13.Fancy Image Hover Using CSS3 Create fancy image hover with CSS3. DEMO [...]
Buy:Tramadol.Soma.Cialis Soft Tabs.Cialis Professional.Viagra Professional.Viagra Soft Tabs.Maxaman.Zithromax.Super Active ED Pack.Cialis.Cialis Super Active+.Viagra Super Force.Levitra.VPXL.Propecia.Viagra Super Active+.Viagra….
[...] [...]
[...] 2. Fancy Image Hover Using CSS3 [...]
Cool Work, Now i am also Using it, Thanks for sharing ….
[Reply]
Very Nice effect by using CSS thats very good news for a developers.
Thanks.
[Reply]
[...] 53. Fancy Image Hover Using CSS3 [...]
[...] This post was Twitted by binitamshah [...]