Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Image CSS: CSS3 demos: Here

CSS3 Hover Image Gallery

Author: Dynamic Drive

A sleek image gallery that takes advantage of CSS3 animation, shadows, and the "transform" property to instantly add a smooth hover effect to its images, whereby the image enlarges and moves closer to the user.

The hover effect currently works best in Google Chrome, Safari 4+, and Opera 9.5+. In FF 3.6, the CSS animation is skipped, while in IE, the entire effect isn't visible.

The CSS:


Code Info

Rate this code:

Date Posted: 09/08/2010

Revision History: None

Usage Terms: Click here

Your Comments (7)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 1 pages

Optimise the images and the css files and the loading is much quicker. I like the way the css renders the floating effect on the page.

Posted by CFDs on 09/09, 12:59 AM
great news. thanks for sharing.
Posted by oyun haberleri on 09/13, 09:03 AM
does it work in ie6??? answer me plz
Posted by taitran on 09/13, 02:03 PM
are there any idea to make it visible in IE too??
Posted by juwita on 09/14, 10:14 AM
The border effect looks great in IE9, although the enlarge effect doesn't work (yet), I hope it does when it comes out of BETA mode. Must say though I like IE9 already! although not all the CSS3 attributes are usable yet I hope they do SOON!

Looked at this in Chrome, excellent script DD!! Good job, will defo be using it! Thanks!
Posted by Jamie on 09/17, 06:28 AM
can u make it work in ASP.NET (VS 2008).
i tried but failed.
help me plz.
Posted by Deepjyoti Das on 09/24, 10:30 PM
very cool how the CSS renders... great job Dynamic Drive...
Web Design Lebanon
Posted by SEO on 10/06, 10:10 AM

Comment Pages 1 of 1 pages

Commenting is not available in this weblog entry.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.