3D Hover Effect for Thumbnails and Images
Description
A simple CSS3 3D experiment showing the conversion of an image into a realistic 3D cuboid on hover with a cool shadow effect.
The bottom surface of the cuboid is made using a pseudo element which inherits the background image of the thumbnail and is positioned perpendicularly to create the 3D box effect.
The second pseudo element uses a translucent background and box-shadow to create a blurred dark shadow for the cuboid. Though CSS blur filter provides better control and visuals for the shadow, we stick to box-shadow because of the lack of support for CSS filters in many browsers.
Illustration by Mikael Gustafsson
21 Comments
Description
21 Comments
(close)Nick
AWESOME!! THX a bunch for sharing it!! ;-)
i5um41ru
Oh my god.. that’s awesome :D :D :D
Malith
this doesn’t work… please someone help me..
Óscar
A good practice:
”
:-)
Jacob Gelman
This is amazing!
Ari
Wow, really impressive. Thanks for sharing.
Shaya
Hi,
Thanks for the wonderful tutorial..
am a beginner at css… was wondering if i want this effect on multiple images at the same time… where do i place the images???
Your help will be greatly appreciated.
Shane
i have tried this code using notepadd ++ and launching in chrome but its not working, any ideas why?
joel
great tutorial!! works perfectly in firefox but not in chrome:(
Tho Vo
Really cool and amazing!
Thank for sharing ^^
Henk
Your example here works fine in Chrome, but when copied to a test html, the 3D effect does not work at all. In Firefox the test HTML does work though, which is odd… As expected IE didn’t work at all..
Pete
This is really cool, thanks for taking the time to share it
Laegnur
@Henk, in Chrome you need to add the -webkit-* expecific tags to css.
Rinus
hi man, I love this but it doesn’t work for me, can you help me? thnks
IEFan
please fix it for ie8 =(
Smith
why doesn’t it work with Safari?
mehran
it’s not working on firefox
what should i do????
:(
Ralph
can u tell me how to change this in other way. From small picture get this one u get now.
Juha
Really good work! I’ve tried to make this responsive, but can’t find a way to deal with the height of the thumb div. If I make the height a percentage instead of fixed pixel value it won’t work anymore. Any idea how to make it work with % instead of px values?
mbt imara mens shoes black
http://www.trustafireman.com/mbt-shoes/mbt-shoes-online-review.php mbt shoes online review
nerf gun farthest range all
A toy hammock or sling hung within the corner or for the wall behind your youngster’s bed
is usually an excellent choice. Let’s score a lie at whatever of the loved indoor girls’ toy.
Rarest nerf gun Parents should create rich environment with toys in the home for baby, focus on perception characteristics of toys like size, colors, and shapes.
Hasbro has designed different toys based around the characteristics of
babies and youngsters. Potato Head was this type of huge success
which it became the initial toy product ever advertised right
to children.