News

How to build hover and transition effects

Employ CSS3 transitions and opacity to create jQuery-like hover effects. Plus, use HTML5-friendly nav tags to create text hover effects

css logo

INSPIRATION: www.substrakt.co.u

The rise of CSS3 has seen a whole new collection of methods for creating cool and contemporary styling that used to need jQuery at its side to be achieved. The introduction of CSS transforms and transitions means that CSS is now far more capable of creating animation effects without the need for any external code.

CSS transitions could be construed as hover effects on steroids, but that would be doing them an injustice as they have so much more to offer. Transitions can add a smooth transition from one state to another. Adding opacity into the mix allows the transition to go from a solid colour to an translucent state, or the opposite effect can be achieved just as easily. This is a technique seen on the homepage of the Substrakt site with the addition of increasing the background image size. The opacity can be played with to create the right amount in the start and finish states.

Hover effects, it seems, have been around since HTML was invented and they are still a popular technique. The beauty of hover effects is that they can be manipulated to appear in a host of guises. They are relatively quick to build and offer good browser support.

The typical approach for creating navigational elements is to use an unordered list and add the hover effect on the active link. Nothing wrong with this, but to go more HTML5-friendly the nav tag can be styled to achieve much the same effect. This requires less code and is easy to display horizontally or vertically. Adding an underline, as demonstrated in the Substrakt site, is again a simple but effective hover effect using only CSS.

TECHNIQUE

QUICK CSS3 FADE EFFECTS
Fade effects on the hover state are very popular and the use of CSS transitions removes the need for any user coding. In the following example a < div> tag contains a background image with styled text overlaying it. The initial state uses a high opacity to give the merest hint of the image. The hover effect, applied to the < header> tag, uses a low opacity to view the image when the cursor rolls over the associated text.

Create container

Create a < div> tag to contain the background image and set height and width to match the latter. Now add the background image in the tag: background-image: url(escape.jpg);

Fade class

Now to create the fade class that determines colour, length of transition and starting opacity. The opacity ranges from 0-1, set to .9 to start with a dark background. Adjust speed of fade (eg 1s).

Hover effect

Set the fade hover opacity to 0 or 0.1 to ensure the background image gets seen. Use the < h2> tag to add text and add the fade class to the tag (see disc for full code).

TECHNIQUE

ADD CUSTOM UNDERLINES TO LINKS
An underline is often added to text links to emphasise the current link. The Substrakt site takes the basic concept and adds a hover effect. The hover effect changes the text colour and adds a styled underline.

The nav tag

To create the navigation base, the semantic < nav> tag is going to be used rather than an unordered list. The first step is to add a set of < /nav>< nav> tags in the body and then include the links that are to occupy the menu.

001 < nav>
 002 < a href="#">WORK< /a>
 003 < a href="#">ABOUT< /a>
 004 < a href="#">JOURNAL< /a>
 005 < a href="#">CONTACT< /a>
 006 < /nav>

Style link

By default links will sit horizontally, so the first step is to add a right margin to add space. To create the space between the link and underline, bottom padding needs to be added. To finish, style the text and set text-decoration to none to remove underline

001 nav a {
 002 padding: 10px 0px 20px 0px;
 003 margin: 0px 30px 0px 0px;
 004 text-decoration: none;
 005 color: #999;
 006 font: 800 14px Open Sans;}

Add underline


The final step is to add the underline on hover. This is achieved by adding a bottom border, nav a:hover {border-bottom: #000 solid 3px;}. A designer has the option to modify all the settings – eg colour, width, style – to suit.

×