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

136 Comments

Spark
May 1, 2009 at 12:32 am

first!

I wonder if there is a simple way to make hover work trouble-free on IE browsers without javascript…

great post by the way!

Kirk
May 1, 2009 at 12:46 am

Many sites now use these hover effects to reduce clutter throughout the interface, and I think it’s a great idea, but IE6 only supports :hover on a tags, so applying the hover effect to DIVs, TDs, etc relies on JavaScript to add the mouseover effect.

A simple (and fairly old) example of this are the suckerfish CSS dropdowns that relies on JavaScript to add the :hover effect to LI tags.

Davor
May 1, 2009 at 12:59 am

very nice article! especially the part with minimizing clutter.

Janko
May 1, 2009 at 1:58 am

Nice reminder for web designers&developers

Charlydonc
May 1, 2009 at 3:11 am

Same comment than others. Hover is a great tool for fairly simple interactivity improvement.
It is still a pain that IE6 does not support it totally.
Java script to fix it is widely available on the web and not too complex but it makes :hover complicated while it should be easy to use.

Micah
May 1, 2009 at 3:13 am

Viewing those examples, it looks like this stuff is a lot simpler to do than I expected. Thanks for the great article!

aravind
May 1, 2009 at 3:51 am

Hover plays a major role in usability indeed.
Great examples and tutorials.
Thanks

DKumar M.
May 1, 2009 at 4:07 am

Nice Overview nick… Hover is one of my 1st preferences while designing any project. Thanks for the good read.

DKumar M.
@instantShift

Shaun
May 1, 2009 at 4:11 am

The big problem with hover is that you cannot use it on a device such as iPhone! You cannot hover, only touch.

SE7EN
May 1, 2009 at 4:59 am

I really like the concept of using hover to minimize clutter
like in many web apps and also commenters’ name/url in WebDesignerWall :)

Marijan Šuflaj
May 1, 2009 at 5:43 am

Another example of hover is in cpanel (go to ftp accounts). It’s not to special, but it gives some good ideas.

Justin
May 1, 2009 at 5:54 am

To use :hover on ANY element in the page, check out Whatever:Hover It’s been around for quite some time, but a lot of people still don’t know about it.

http://www.xs4all.nl/~peterned/csshover.html

Jacob Lower
May 1, 2009 at 7:13 am

Another useful entry =)
Thanks :*

Michael Cerdeiros
May 1, 2009 at 9:05 am

thanks for this article. i will consider adding some hover elements into my project!

Scott Petrovic
May 1, 2009 at 9:14 am

Really solid post. Makes me get excited about DOM manipulation and jQuery. Thanks

Daniel H
May 1, 2009 at 10:36 am

…but I was under the impression that you couldn’t apply hovers to anything other than a elements in Firefox et al?

taylan
May 1, 2009 at 10:52 am

many fun options to decorate links. thanks a lot for collection.

Robbi
May 1, 2009 at 12:06 pm

Thank you so much! I’ve been google-ing tool tip info for ages, your demos are amazing!!

Vladimir
May 1, 2009 at 12:12 pm

Good point! One question: do you use some kind of program for the lens effect?

Jack Franklin
May 1, 2009 at 12:22 pm

@Daniel H, you can use :hover on any element in IE7 onwards and all other major browsers, IE6 is the only one that wont have it.

Paul Mackenzie
May 1, 2009 at 12:46 pm

Great round up! I personally love the hover techniques emplyed by http://www.principlesofbeautifulwebdesign.com really got me thinking

steve minutillo
May 1, 2009 at 12:49 pm

Oh, but you’ve forgotten the most common use of hover: to deny service to iPhone (or other touchscreen) users!

Anraiki
May 1, 2009 at 2:41 pm

Unfortunately Hover has it limits in CSS2. It is really beautiful in CSS3. And combined with Java even better.

The downfall is that:
1. Not many people have their browser up to date to have CSS3
2. Some people have Javascript Turned Off

Thus, some of those Maximized use of Hover can’t be even used at all.

nk masaki
May 1, 2009 at 4:25 pm

but…how? idgi

Sklep Zoologiczny
May 1, 2009 at 4:26 pm

Thanks!

Teddy
May 1, 2009 at 8:17 pm

I have always given great importance to hover status in Web Design. Thanks for this helpful post!

cubus
May 2, 2009 at 8:45 am

Nice post.

Another example of good hovering I like is the one on Spreadshirt

It shows the print of the hovered t-shirt in detail.

Michael Lynch
May 3, 2009 at 12:43 am

I have never even thought of using hovers outside of the typical color or text decoration swap. Thanks for the tip. I’m sure I’ll be creative with it one day.

Tukang Nggame
May 3, 2009 at 3:12 am

thanks for the tutorial, really i need it to improve my design skill

WebStar Multimedia
May 3, 2009 at 12:26 pm

Using Hover to display a tool tip or additional information about a product or service is a phenominal idea.

mandy
May 3, 2009 at 5:23 pm

I like the hover and jquery techniques that nickd uses in his site here http://www.nickd.co.nz and especially here http://www.nickd.co.nz/portfolio/

Moataz El Wesimy
May 4, 2009 at 2:58 am

one more thing is the IE6 it doesn’t recognize hover except for tag

Zeb
May 4, 2009 at 3:51 am

Many people on IE6 more… unhappy :-(

Guillaume
May 4, 2009 at 5:12 am

Nice post ;)

Design was here
May 4, 2009 at 6:54 am

Great post!

Thanks!

Tom
May 4, 2009 at 11:09 am

Lovely guide and tut. Thanks for the great information!

– TOM!

David Costales
May 4, 2009 at 11:16 am

Awesome post, direct to my Delicious Bookmarks :P

Design-sector
May 4, 2009 at 5:08 pm

Great post, small hover details makes a big different

Sam Ng
May 4, 2009 at 5:52 pm

very helpful! Thanks a bunch!

jucallme
May 5, 2009 at 4:07 am

Some new ideas to play with, thanks for the tips.

Venkat
May 5, 2009 at 8:03 am

Excellent Examples, though many uses Javascript/JQuery and didn’t support old goody IE6 (div:hover).

Nick
May 5, 2009 at 12:32 pm

IE6 doesn’t do :hover, but don’t let that stop you from making your site beautiful. If the feature you want to implement is required for the site to function then use a javascript solution just for IE6, the rest can still use the :hover tag. If the feature is just for visual impact then it shouldn’t matter if IE6 users are missing out. Designs don’t have to look exactly the same in IE6 as everywhere else. As long as they still look good that is all that matters.

almudesign
May 5, 2009 at 1:24 pm

Great tutorial!

Thank you so much!

yep
May 5, 2009 at 4:08 pm

Nice one ; but I’d like to add a link that totally illustrate the title of this post.

http://www.dontclick.it

enjoy ;)

Carl - Web Courses Bangkok Instructor
May 5, 2009 at 10:17 pm

The idea of minimizing clutter is a fantastic idea. These ideas shows that users are becoming used to how the web works and expect to see a Edit Delete Rename against a picture etc, so they know where to look. As designers that gives the ability to give users what they want in a more compact way.

Lovely ideas thanks!

Damjan Mozetič
May 6, 2009 at 1:50 am

Great article, I just love when CSS gets used for things that only a while ago were javascript’s domain.

Vim
May 6, 2009 at 3:56 am

Great article, I’ll be testing the tutorials soon and maybe apply the hover on some websites

ZorphDark
May 6, 2009 at 9:32 am

jQuery really power up our website through an easy way!!

João Henrique -Designer from Brazil
May 6, 2009 at 10:53 am

Nice!

João Henrique -Designer from Brazil
May 6, 2009 at 10:58 am

Cool!

kfz aufbereitung bonn
May 6, 2009 at 7:49 pm

thx

Panix
May 7, 2009 at 4:09 am

I like the idea of using CSS to hide and show elements.

I’m trying to build this idea into one my new sites this now. Instead of showing individual products and the products next to each other I’ve simply displayed the individual products with a “+” icon. When you roll over the icon the saver bundles appear, helping simplify the catalog. Thanks for the inspiration

Edgar Leijs
May 7, 2009 at 3:38 pm

Thanks for especially the second, non cluttering method!

Would like to see that more often!

Gr, Edgar

Patricia
May 7, 2009 at 5:24 pm

Excellent article. Many thanks :)

naran_ho
May 7, 2009 at 7:59 pm

Excellent , Realmente muy interesante, thanks ….

Miss Blossom
May 8, 2009 at 1:46 am

Great food for thought. I’ll be taking this into major consideration on my future site – really relevant points about minimising clutter, as most sites are all over the shop. I like it in relation to tutorials as well. I’m going to give it major thought over the weekend. Thanks as usual for your insightful blog.
Blossom
x

Rick
May 8, 2009 at 9:52 am

Best Examples!

Elsie
May 8, 2009 at 6:14 pm

hey, you should update your site a little more often because I love your posts, but after not seeing new ones for a while i forget to come back…

otherwise, this is an awesome site i love it!

Carly
May 9, 2009 at 3:17 am

Wow – brill article and tutorial – cannot wait to give this a try!

Bindass Delhiite
May 9, 2009 at 6:47 am

Good collection of live examples and nice detailing.

Let’s *’hover’* ;)

enjoy :)

Joel Smith
May 9, 2009 at 2:25 pm

Thank you for the inspiration! I agree, I don’t think people use hover to its fullest potential.

rayjbraz
May 9, 2009 at 7:06 pm

nice! ^^

Blog design Lab
May 10, 2009 at 12:39 pm

Very usefull, Thanks !

Martin Hyde
May 10, 2009 at 5:50 pm

Thanks, very good post, great examples.

hguhf
May 10, 2009 at 9:36 pm

Thank you for the inspiration! I agree, I don’t think people use hover to its fullest potential.

Radoslav Holan
May 11, 2009 at 1:50 am

Yeah! I started to use more of hover in last projects and I can tell one thing – it’s the easiest way to bring something cool for visitors what will force them to discover what else is prepared for them. It’s the way to bring some interactivity to serious page, I like it. Thanx for more inspiration!

arasiyalkalam
May 11, 2009 at 4:59 am

very super site

Adam
May 11, 2009 at 5:03 am

Some very nice examples. A couple of uses here I wouldn’t have thought of but a great selection. Thanks!

Ivo Ivan
May 11, 2009 at 7:19 am

Nice examples and inspiration. I like hovers.

Stu Collett
May 11, 2009 at 11:50 am

Great article. I love your first example of adding an arrow. It’s simple and effective.

Ritchie
May 12, 2009 at 10:43 am

nice post! good collection of previous tutorials to enhance the creativity of the beginners.

Idowebdesign
May 12, 2009 at 4:07 pm

Very nice examples of the Hover pseudo class versatility. Thanks !!

Andy Morris
May 13, 2009 at 2:34 am

Only one person mentioned that this doesn’t work on touchscreen devices, like iPhone? This is a serious issue. Interactive mobile web devices are become VERY prevalent and MANY people are visiting websites on iPhones and other touchscreen devices. Using hover will render your website useless to millions of viewers on these touchscreen devices.

Use hover with caution! Accessibility should almost always win over coolness!

Andy

Keane
May 13, 2009 at 4:45 am

I was just thinking about the hover effect to show more info just this morning. I’m glad I checked on your site and landed on this article. :)

Neil J
May 14, 2009 at 4:52 am

Really nice!! Thanks for taking the time… Just what I need for a project :¬)

Michelle Bivotti
May 14, 2009 at 2:41 pm

Thank you for sharing this. Really usefull.

Graham Allen Web Design
May 14, 2009 at 4:42 pm

Excellent examples. I’ll be adding some of these to my inspiration book. Kudos!

francisa
May 21, 2009 at 9:32 pm

nice

suffolk web design
May 22, 2009 at 3:11 am

There are some great examples of hover effects here mainly because they are functional and aid useability – more often they really don’t. Nothing worse that being on a site where, where ever you move your mouse something pops up!

Vero Tenca
May 26, 2009 at 2:18 am

I love this web!! I don`t speak english because I’m from Argentina, but I still understand something, I think jaja Thanks, this is great!! The best of the best!!!
Sorry for the language

Craig
May 26, 2009 at 8:46 am

I heard about this on the Boagworld podcast. Great stuff!

W3Spor
May 27, 2009 at 1:49 am

Great stuff and good tip! Specially the tool tip – additional information.

Thank you :-)

Adam Akers
May 28, 2009 at 3:24 am

Great, I can take some of these ideas away and I’ll be using them today.

Everett
May 29, 2009 at 1:24 am

Great post! It really came in handy when my client wanted to cram more info into one section of the page. Without this I would have had a bit of a tough time! Thanks for savig my bacon!

topwebpost
Jun 2, 2009 at 6:25 am

very nice

add your new site here

topwebpost.com

Rubber Cheese
Jun 15, 2009 at 4:30 am

Some nice examples of hover shown here. One of the best examples I can think of is the BBC website with the music widget on the home page. http://www.bbc.co.uk/ They use it really well to avoid clutter. Infact they use hover very effectively through the whole site.

منتديات ماى بكتشرز
Jun 15, 2009 at 3:54 pm

Very Good .. i will Use Them all really … Lol

diyet
Jun 17, 2009 at 1:05 pm

thank it is the topic

Photographer
Jun 17, 2009 at 1:53 pm

Thanks for it. its great.

Muhammad Usman Arshad
Jun 19, 2009 at 8:41 am

thanks to share, it’s very helpful.

Ofer
Jun 21, 2009 at 12:03 am

I hate to admit it, but hovering and other DHTML tricks makes my life easier and my users/customer happier.

Tom
Jun 22, 2009 at 7:54 am

Learned some new hover tricks! Very nice, thanks for sharing.

g3niuz
Jun 29, 2009 at 6:38 am

really usefull article – will def. try this later ;D

Shane
Jul 3, 2009 at 2:26 am

Very nice post. I love the hover effect you added on Best Web Gallery, it really gives the user a great preview quickly yet subtly.

yapidekor
Jul 6, 2009 at 1:54 pm

Thank you my friend …

Nick Wichman
Jul 23, 2009 at 8:46 am

This is an awesome post. Tooltips and fine details like these are the things that make modern web design fun, organized, and usable. Wonderful.

@nickwichman

ƒЯєє ςtγlє
Jul 28, 2009 at 3:08 am

very kool, more useful…

cennet
Aug 8, 2009 at 5:22 am

Thanks Thanks What’s the problem here? Google could bury the meager profit number from even the biggest media conglomerates.

cennetevi
Aug 8, 2009 at 5:40 am

these are awesome!
thanks for putting in the effort to get this list together

cennetevi
Aug 8, 2009 at 6:20 am

Thank =)=)=) you http://www.cennet.gen.tr webdesignerwall Thanks

Michèle
Aug 10, 2009 at 2:02 pm

Is this the same type of hovering that one would use when creating a hover that would say give more detail to an item? It looks really similar. I am taking a refresher course on the latest in CSS, but they haven’t gone over the cool hovering that I see on so many shopping sites that give more detail of the products they are selling. This would be a very useful tool for me to learn. Thanks for the info you have here, if you happen to know where I can find info on what I am mentioning, please post it here – or send me an email. So far, they haven’t touched on what I want to learn more about at all in my course, and it only has two more weeks left of classes.

William Johnson
Aug 19, 2009 at 12:52 pm

Some great demo’s but I noticed IE8 displays a 2/3px border around the Animated Hover demo as the em block shifts. Flawless in firefox but IE8 could be considered problematic.

Otero
Aug 25, 2009 at 2:35 pm

Excellent tutorial help much to order and specify all that our site have.

Very good

Greetings
http://www.oterodesing.com Spanish Web design

weici
Sep 4, 2009 at 4:19 am

You are amazing. really nice site.

bagsin
Sep 10, 2009 at 8:09 pm

A pleasure read your blog.

Promotional Products Junkie
Sep 25, 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.

Runarykat
Oct 28, 2009 at 11:45 am

I-LOVE-YOU!!!!!

Mike
Oct 31, 2009 at 5:14 am

these are awesome! thanks

twig
Dec 18, 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

alex
Jan 13, 2010 at 5:40 pm

The ultimate Tutorial about “How to impress your wife with CSS and JavaScript”. Everlasting!

Thanks for that!

alex
Jan 13, 2010 at 5:42 pm

I was talking about gucci, wasn’t I?

Bret Bouchard
Feb 21, 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.

sbobet
Mar 4, 2010 at 3:38 am

Specially the tool tip

Web Design
Apr 28, 2010 at 9:06 pm

very interseting read thank you

تقنية
Sep 21, 2010 at 7:48 am

great work thanks alot for that tutorial

mansion88
Sep 30, 2010 at 7:18 am

The ultimate Tutorial about “How to impress your wife with CSS and JavaScript”. Everlasting!

mary
Oct 7, 2010 at 9:55 pm

I hope you will keep updating your content constantly as you have one dedicated reader here.

sbobet
Oct 10, 2010 at 12:39 am

Thank you for introducing me know.

gasbi
Oct 25, 2010 at 12:25 pm

Thank you for your good advice.

vanarie
Nov 12, 2010 at 12:03 pm

The image hoverblock is very eloquent and dead simple. Thanks for this resource!

sbo
Dec 15, 2010 at 2:43 am

Best technical and tutorial design, This is a good and I will use for fix my picture.

Henry Peise
Dec 23, 2010 at 11:28 pm

Recently i am looking fot the white iphone 4 conversion kit. If you have any recommendation, plz tell me. I will be very grateful!

Juno Mindoes
Dec 24, 2010 at 10:24 pm

The Christmas time is comming, and the most desire present i want to get, is the latest white iphone 4, can i get one? Tell you after Xmas.

sbobetlive
Dec 26, 2010 at 1:22 am

This is a very good tool, Thank you.

oky
Dec 27, 2010 at 11:10 pm

that’s great….

Uçak Bileti
Jan 11, 2011 at 5:03 pm

isteklerinde bulunman normal

Ben
Jan 13, 2011 at 2:59 am

I was reading something else about this on another blog. Interesting.

altın çilek
Feb 2, 2011 at 7:11 am

thanks thats great website

bwin888
Mar 2, 2011 at 12:26 pm

http://www.bwin888.com
แทงบอล แทงบอลออนไลน์ บาคาร่า บาคาร่าออนไลน์ sbo sbobet ibc ibcbet gclub ruby ไฮโล กำถั่ว สล็อต หวย หวยออนไลน์

Dundee Web Designer
Mar 10, 2011 at 9:03 am

Nice post. Really like the jQuery tooltip to thanks for that.

dexx
Apr 17, 2011 at 2:32 pm

Different thinking, contains a problem to produce several possible solutions.

complex 41
Aug 4, 2011 at 10:00 am

These are really stunning, there are even some sites that are new to me. All the colour schemes complex 41are definatly brave but I really think they work to make the sites eye catching and engaging.

guu
Sep 26, 2011 at 1:53 am

i like it

Brajesh kant pathak
Nov 17, 2011 at 7:06 am

dear sir/madam
how to create css layout so please send me
tutorials brajesh pathak

รถมือสอง
Apr 3, 2012 at 4:52 am

Nice design I like this tutoreal and I think this is the best post.

DymoLabels
Jun 1, 2013 at 6:12 am

hi
this is really very helpful
thanks for this article

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.