CSS Hover Effect for images Thumbnails ( HTML & CSS Tutorials )
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.
Also check out more CSS & HTML Tutorials:
1. How to make CSS & HTML Equal Height Columns - • How to make CSS & HTML Equal Height Column...
2. How to make Object orbiting planet with CSS & HTML - • CSS & HTML Object orbiting planet Animation
3. How to make Responsive Web Design Layout for Blog - • How to make Responsive Web Design Layout f...
4. CSS responsive Image transform - Accordion Effect - • CSS responsive Image transform Accordion E...
5. How to make JQuery Text Typing Effect animation - • How to make JQuery Text Typing Effect anim...
6. CSS & Html Holiday Blinking Lights effect - • CSS & Html Holiday Christmas Lights Blink ...
7. How to make HTML5 canvas screensaver - • How to make HTML5 Canvas Screensaver (JS,C...
8. How to Make CSS simple navigation menu with hover - • CSS simple Menu with hover ( Web tutorials...
9. Simple hover effects created with CSS filters - • CSS Image hover effects with CSS3 filters ...
10. How to make CSS3 & javascript image slider with thumbnails - • CSS & Javascript image slider with thumbnails
11. How to make a snake game using HTML5 canvas and Jquery - • How To make HTML snake game + Code
Please like and subscribe our channel for more video
/ webtutorialsdev
-----------------------------------------------------------------------------------------
Check More at Playlist - http://goo.gl/PxJ3k6
Like Video? Subscribe - http://goo.gl/oyzoad
#css #3d #html #hoverEffect #cssHover #webtutorials