Usually, we create hover effects by changing: font color, font styles, border styles, background, and etc. But there are a lot more that we can do with hover. We can use hover to beautify design, minimize clutter, and display additional information. In this article, I'm going to provide various examples of websites that maximize the use of hover. Also, I will provide several quick tutorials on how to create different mouse hover effects. So, read on.

1. Using hover to beautify layout

I use hover to beautify the layout of IconDock. For example, when you mouse over the blog title or the sidebar link, it displays an arrow.

IconDock

2. Using hover to minimize clutter

QBN makes its layout look cleaner by hiding the extra buttons on default. When you mouse over a link block, the buttons will appear. Imagine how clutter it will be to display those buttons on every block.

QBN

Gucci puts focus on their product images by hiding the variations. When you hover the product image, it displays the variations and allows you to navigate through them.

Gucci

3. Using hover to display additional information (tooltip)

Coda combines CSS and Javascript to create a beautiful tooltip. When you mouse over the download link, additional information about their software fades in.

Coda

On Best Web Gallery, I use jQuery to display a larger image of the screencap.

Best Web Gallery

Tutorials

Image Hover (see demo)

The following CSS tutorial imitates the hover effect as seen on the Gucci and QBN site. It hides the .links paragraph on default. When the cursor is over the <div> block, it will set the paragraph to display:block.

image hover

Animated Hover (see demo)

The following demo use jQuery to animate the <em> text when you hover the link, as seen on the Coda site. Read my jQuery tutorials to learn how to do this.

animated hover

jQuery Tooltip

Head over to CSS Globe to see the jQuery tooltip that I use for Best Web Gallery.

animated hover