3D Hover Effect for Thumbnails and Images

View code Play Walkthrough

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

Add New Comment

21 Comments

(close)
Nick

Nick

AWESOME!! THX a bunch for sharing it!! ;-)

i5um41ru

i5um41ru

Oh my god.. that’s awesome :D :D :D

Malith

Malith

this doesn’t work… please someone help me..

Óscar

Óscar

A good practice:

:-)

Jacob Gelman

Jacob Gelman

This is amazing!

Ari

Ari

Wow, really impressive. Thanks for sharing.

Shaya

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

Shane

i have tried this code using notepadd ++ and launching in chrome but its not working, any ideas why?

joel

joel

great tutorial!! works perfectly in firefox but not in chrome:(

Tho Vo

Tho Vo

Really cool and amazing!
Thank for sharing ^^

Henk

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

Pete

This is really cool, thanks for taking the time to share it

Laegnur

Laegnur

@Henk, in Chrome you need to add the -webkit-* expecific tags to css.

Rinus

Rinus

hi man, I love this but it doesn’t work for me, can you help me? thnks

IEFan

IEFan

please fix it for ie8 =(

Smith

Smith

why doesn’t it work with Safari?

mehran

mehran

it’s not working on firefox
what should i do????
:(

Ralph

Ralph

can u tell me how to change this in other way. From small picture get this one u get now.

Juha

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?

nerf gun farthest range all

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.

5x 10x 15x 20x

21 Comments

Description