Mary Lou wants to show you how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effect that you can find on the page of the Google SketchUp Showcase. In her examples, she’ll use thumbails that will reveal some more information on hover. She will create a structure with jQuery that will allow making the image appear as folded or bended when you hover over it. For the hover effects she will use CSS 3D transforms.
Each thumbnail goes into a division with another division for the details (view-back). The structure that Mary Lou wants to create for each division with the class view using JavaScript. Each slice will have the respective image as it’s background image and since you have a nested structure, this will allow you to control the effect. Additionally, she’ll add an overlay span that she’ll use to make the effects more realistic. Now you can have a lot of hover fun!
Comments
Be the first to write a comment
You must me logged in to write a comment.