Profile Widget UI

CSS Accordion: Checkbox Hack

February 16, 2014 Comments (0) Views: 2974 Coding, Tutorials

3D Hover Effect for Thumbnails and Images

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.

View Tutorial

Tags: #, #, #, #, #, #, #, #, #, #, #

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.