image

The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.

Please note that this will only work properly in modern browsers that support the CSS3 properties in use.

HTML markup


The structure of markup is very simple and intuitive. Create a container that will have our image and all the other information.

Inside the view insert an element with the class mask that will be responsible for our effects driven by CSS3 and inside it we will put a title, description and a link to the full image. (For some examples, we’ll need to add the mask element as a separate element and wrap the description in a devi with class content.)
Killer 5 january 2012, 15:36