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

image

This article will show some techniques to create effects using CSS3 on the example of the menus. The beauty of my idea is that it would simply compose elements, such as icons of the main title and secondary title, which will be animated by the cursor moving using only CSS transitions and CSS animation. We will consider a few different effects for the elements.

Icons that are being used in the demo are the typeface of Web symbols. The typeface is created by Just Be Nice studio.

HTML Layout

HTML menu structure will be as an unordered list where each element is a link, which includes the span with an icon and div with the main and secondary title:
<ul class="ca-menu">

  • <span class="ca-icon">A</span>
    <div class="ca-content">
    <h2 class="ca-main">Articles</h2>
    <h3 class="ca-sub">Web development articles</h3>
    </div>
  • ...
    </ul>

    As we use the font for the icons, we will write the corresponding letter for the icon.
    Sparks 26 december 2011, 16:05