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.
Spark
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
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
very nice article! especially the part with minimizing clutter.
Janko
Nice reminder for web designers&developers
Charlydonc
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
Viewing those examples, it looks like this stuff is a lot simpler to do than I expected. Thanks for the great article!
aravind
Hover plays a major role in usability indeed.
Great examples and tutorials.
Thanks
DKumar M.
Nice Overview nick… Hover is one of my 1st preferences while designing any project. Thanks for the good read.
DKumar M.
@instantShift
Shaun
The big problem with hover is that you cannot use it on a device such as iPhone! You cannot hover, only touch.
SE7EN
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
Another example of hover is in cpanel (go to ftp accounts). It’s not to special, but it gives some good ideas.
Justin
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
Another useful entry =)
Thanks :*
Michael Cerdeiros
thanks for this article. i will consider adding some hover elements into my project!
Scott Petrovic
Really solid post. Makes me get excited about DOM manipulation and jQuery. Thanks
Daniel H
…but I was under the impression that you couldn’t apply hovers to anything other than a elements in Firefox et al?
taylan
many fun options to decorate links. thanks a lot for collection.
Robbi
Thank you so much! I’ve been google-ing tool tip info for ages, your demos are amazing!!
Vladimir
Good point! One question: do you use some kind of program for the lens effect?
Jack Franklin
@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
Great round up! I personally love the hover techniques emplyed by http://www.principlesofbeautifulwebdesign.com really got me thinking
steve minutillo
Oh, but you’ve forgotten the most common use of hover: to deny service to iPhone (or other touchscreen) users!
Anraiki
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
but…how? idgi
Sklep Zoologiczny
Thanks!
Teddy
I have always given great importance to hover status in Web Design. Thanks for this helpful post!
cubus
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
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
thanks for the tutorial, really i need it to improve my design skill
WebStar Multimedia
Using Hover to display a tool tip or additional information about a product or service is a phenominal idea.
mandy
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
one more thing is the IE6 it doesn’t recognize hover except for tag
Zeb
Many people on IE6 more… unhappy :-(
Guillaume
Nice post ;)
Design was here
Great post!
Thanks!
Tom
Lovely guide and tut. Thanks for the great information!
– TOM!
David Costales
Awesome post, direct to my Delicious Bookmarks :P
Design-sector
Great post, small hover details makes a big different
Sam Ng
very helpful! Thanks a bunch!
jucallme
Some new ideas to play with, thanks for the tips.
Venkat
Excellent Examples, though many uses Javascript/JQuery and didn’t support old goody IE6 (div:hover).
Nick
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
Great tutorial!
Thank you so much!
yep
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
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č
Great article, I just love when CSS gets used for things that only a while ago were javascript’s domain.
Vim
Great article, I’ll be testing the tutorials soon and maybe apply the hover on some websites
ZorphDark
jQuery really power up our website through an easy way!!
João Henrique -Designer from Brazil
Nice!
João Henrique -Designer from Brazil
Cool!
kfz aufbereitung bonn
thx
Panix
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
Thanks for especially the second, non cluttering method!
Would like to see that more often!
Gr, Edgar
Patricia
Excellent article. Many thanks :)
naran_ho
Excellent , Realmente muy interesante, thanks ….
Miss Blossom
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
Best Examples!
Elsie
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
Wow – brill article and tutorial – cannot wait to give this a try!
Bindass Delhiite
Good collection of live examples and nice detailing.
Let’s *’hover’* ;)
enjoy :)
Joel Smith
Thank you for the inspiration! I agree, I don’t think people use hover to its fullest potential.
rayjbraz
nice! ^^
Blog design Lab
Very usefull, Thanks !
Martin Hyde
Thanks, very good post, great examples.
hguhf
Thank you for the inspiration! I agree, I don’t think people use hover to its fullest potential.
Radoslav Holan
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
very super site
Adam
Some very nice examples. A couple of uses here I wouldn’t have thought of but a great selection. Thanks!
Ivo Ivan
Nice examples and inspiration. I like hovers.
Stu Collett
Great article. I love your first example of adding an arrow. It’s simple and effective.
Ritchie
nice post! good collection of previous tutorials to enhance the creativity of the beginners.
Idowebdesign
Very nice examples of the Hover pseudo class versatility. Thanks !!
Andy Morris
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
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
Really nice!! Thanks for taking the time… Just what I need for a project :¬)
Michelle Bivotti
Thank you for sharing this. Really usefull.
Graham Allen Web Design
Excellent examples. I’ll be adding some of these to my inspiration book. Kudos!
francisa
nice
suffolk web design
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
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
I heard about this on the Boagworld podcast. Great stuff!
W3Spor
Great stuff and good tip! Specially the tool tip – additional information.
Thank you :-)
Adam Akers
Great, I can take some of these ideas away and I’ll be using them today.
Everett
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
very nice
add your new site here
topwebpost.com
Rubber Cheese
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.
منتديات ماى بكتشرز
Very Good .. i will Use Them all really … Lol
diyet
thank it is the topic
Photographer
Thanks for it. its great.
Muhammad Usman Arshad
thanks to share, it’s very helpful.
Ofer
I hate to admit it, but hovering and other DHTML tricks makes my life easier and my users/customer happier.
Tom
Learned some new hover tricks! Very nice, thanks for sharing.
g3niuz
really usefull article – will def. try this later ;D
Shane
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
Thank you my friend …
Nick Wichman
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є
very kool, more useful…
cennet
Thanks Thanks What’s the problem here? Google could bury the meager profit number from even the biggest media conglomerates.
cennetevi
these are awesome!
thanks for putting in the effort to get this list together
cennetevi
Thank =)=)=) you http://www.cennet.gen.tr webdesignerwall Thanks
Michèle
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
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
Excellent tutorial help much to order and specify all that our site have.
Very good
Greetings
http://www.oterodesing.com Spanish Web design
weici
You are amazing. really nice site.
bagsin
A pleasure read your blog.
Promotional Products Junkie
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
I-LOVE-YOU!!!!!
Mike
these are awesome! thanks
twig
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
The ultimate Tutorial about “How to impress your wife with CSS and JavaScript”. Everlasting!
Thanks for that!
alex
I was talking about gucci, wasn’t I?
Bret Bouchard
Its amazing how many amazing things you can can do to add a littel bit of extra oomf to a design.
sbobet
Specially the tool tip
Web Design
very interseting read thank you
تقنية
great work thanks alot for that tutorial
mansion88
The ultimate Tutorial about “How to impress your wife with CSS and JavaScript”. Everlasting!
mary
I hope you will keep updating your content constantly as you have one dedicated reader here.
sbobet
Thank you for introducing me know.
gasbi
Thank you for your good advice.
vanarie
The image hoverblock is very eloquent and dead simple. Thanks for this resource!
sbo
Best technical and tutorial design, This is a good and I will use for fix my picture.
Henry Peise
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
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
This is a very good tool, Thank you.
oky
that’s great….
Uçak Bileti
isteklerinde bulunman normal
Ben
I was reading something else about this on another blog. Interesting.
altın çilek
thanks thats great website
bwin888
http://www.bwin888.com
แทงบอล แทงบอลออนไลน์ บาคาร่า บาคาร่าออนไลน์ sbo sbobet ibc ibcbet gclub ruby ไฮโล กำถั่ว สล็อต หวย หวยออนไลน์
Dundee Web Designer
Nice post. Really like the jQuery tooltip to thanks for that.
dexx
Different thinking, contains a problem to produce several possible solutions.
complex 41
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
i like it
Brajesh kant pathak
dear sir/madam
how to create css layout so please send me
tutorials brajesh pathak
รถมือสอง
Nice design I like this tutoreal and I think this is the best post.
DymoLabels
hi
this is really very helpful
thanks for this article