Apr 30
Maximize the Use of Hover
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.
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.
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.
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.
On Best Web Gallery, I use jQuery to display a larger image of the screencap.
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.
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.
jQuery Tooltip
Head over to CSS Globe to see the jQuery tooltip that I use for Best Web Gallery.
Free Tickets to WordCamp Toronto WordCamp Toronto 2009 Recap
Comments
Pages: 12 11 10 9 8 7 6 5 4 3 2 … 1 » Show All
There are 115 comments (+Add)
Pages: 12 11 10 9 8 7 6 5 4 3 2 … 1 » Show All
Loading ...
115 sbobet http://www.sbobet-th.com
March 4th, 2010 at 3:38 am
Specially the tool tip
114 Bret Bouchard http://518designs.com
February 21st, 2010 at 10:06 pm
Its amazing how many amazing things you can can do to add a littel bit of extra oomf to a design.
113 alex http://alexkoehler.com
January 13th, 2010 at 5:42 pm
I was talking about gucci, wasn’t I?
112 alex http://alexkoehler.com
January 13th, 2010 at 5:40 pm
The ultimate Tutorial about “How to impress your wife with CSS and JavaScript”. Everlasting!
Thanks for that!
111 vincentdresses http://www.hibridal.com
January 6th, 2010 at 1:50 am
喜欢你们的设计与技术，常来看看
110 twig http://twigstechtips.blogspot.com/
December 18th, 2009 at 5:00 pm
thanks! i was having trouble with mouseover/mouseout and the demos gave me exactly what i was looking for
cheers!
nice comments styling by the way
109 Mike http://www.comastore.com
October 31st, 2009 at 5:14 am
these are awesome! thanks
108 Runarykat
October 28th, 2009 at 11:45 am
I-LOVE-YOU!!!!!
107 Promotional Products Junkie http://www.promotionalway.com
September 25th, 2009 at 9:15 am
Wow! If you go to http://www.promotionalway.com you will see how ‘hover’ is used on the photos of our promotional products and custom business gifts. I think, however the ideas in this post might be better and deserve serious consideration.
106 bagsin http://handbagsurf.com
September 10th, 2009 at 8:09 pm
A pleasure read your blog.