Search
Find: Category: Location:

Keyword

Specific Category

City/State, or Zipcode

3D Hover Effect for Thumbnails and Images

3D Hover Effect for Thumbnails and Images

3D Hover Effect for Thumbnails and Images

  • 0 Stars.

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.








Other Categories:
 HTML5 » Scripts & Codes


Related Listings:
Wordpress Canvas Gallery
Outline Animation Effect in Flash
Gorgeous Page Roll
HTML5 canvas and javascript fireworks
Matrix rain animation using HTML5 canvas and javascript
Top Categories