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, they stick to box-shadow because of the lack of support for CSS filters in many browsers.

Tags: #3D, #Code, #CSS, #CSS3, #HTML, #Perspective, #Pseudo-Elements, #Transition, #Tutorial, #Web Design, #Web Development