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

17 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????
:(

5x 10x 15x 20x

17 Comments

Description