designart

A product page is any page on your website that showcases a product. It has to describe its features, give some screenshots, and be descriptive. Naturally, this is the place where you build up the visitor’s interest towards your product,  but it is getting increasingly difficult to be original in grabbing their attention. Luckily, a new compact JavaScript library can help you make a splash. impress.js is a small, standalone library that makes it easy to design advanced CSS3 presentations with eye-catching effects . But what if we used impress.js for something other than a presentation? This is what we are doing today – we will be spicing up a plain old product page with some CSS3 magic! The HTML We start of with a simple HTML5 document that will be the backbone of today’s example. index.html Impressive CSS3 Product Showcase | Tutorialzine Demo <!-- Google Webfonts and our stylesheet

3D Thumbnail Hover Effects Today we want 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 our examples, we’ll use thumbails that will reveal some more information on hover. We will create a structure with jQuery that will allow making the image appear as folded or bended when we hover over it. For the hover effects we will use CSS 3D transforms.   THE MARKUP __________________________________________________________________________________ The markup for the thumbnail structure will be as follows: 566 124 →       __________________________________________________________________________________   Each thumbnail goes into a division with another division for the details (view-back). The structure that we want to create for each division with the class view using JavaScript is the