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.
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.
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.
On Best Web Gallery, I use jQuery to display a larger image of the screencap.
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
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.
Head over to CSS Globe to see the jQuery tooltip that I use for Best Web Gallery.
great post by the way!
very nice article! especially the part with minimizing clutter.
Nice reminder for web designers&developers
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.
Viewing those examples, it looks like this stuff is a lot simpler to do than I expected. Thanks for the great article!
Hover plays a major role in usability indeed.
Great examples and tutorials.
Nice Overview nick… Hover is one of my 1st preferences while designing any project. Thanks for the good read.
The big problem with hover is that you cannot use it on a device such as iPhone! You cannot hover, only touch.
I really like the concept of using hover to minimize clutter
like in many web apps and also commenters’ name/url in WebDesignerWall :)
Another example of hover is in cpanel (go to ftp accounts). It’s not to special, but it gives some good ideas.
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.
Another useful entry =)
thanks for this article. i will consider adding some hover elements into my project!
Really solid post. Makes me get excited about DOM manipulation and jQuery. Thanks
…but I was under the impression that you couldn’t apply hovers to anything other than a elements in Firefox et al?
many fun options to decorate links. thanks a lot for collection.
Thank you so much! I’ve been google-ing tool tip info for ages, your demos are amazing!!
Good point! One question: do you use some kind of program for the lens effect?
@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.
Great round up! I personally love the hover techniques emplyed by http://www.principlesofbeautifulwebdesign.com really got me thinking
Oh, but you’ve forgotten the most common use of hover: to deny service to iPhone (or other touchscreen) users!
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
Thus, some of those Maximized use of Hover can’t be even used at all.
I have always given great importance to hover status in Web Design. Thanks for this helpful post!
Another example of good hovering I like is the one on Spreadshirt
It shows the print of the hovered t-shirt in detail.
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.
thanks for the tutorial, really i need it to improve my design skill
Using Hover to display a tool tip or additional information about a product or service is a phenominal idea.
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
Many people on IE6 more… unhappy :-(
Nice post ;)
Design was here
Lovely guide and tut. Thanks for the great information!
Awesome post, direct to my Delicious Bookmarks :P
Great post, small hover details makes a big different
very helpful! Thanks a bunch!
Some new ideas to play with, thanks for the tips.
Thank you so much!
Nice one ; but I’d like to add a link that totally illustrate the title of this post.
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!
Great article, I’ll be testing the tutorials soon and maybe apply the hover on some websites
jQuery really power up our website through an easy way!!
João Henrique -Designer from Brazil
João Henrique -Designer from Brazil
kfz aufbereitung bonn
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
Thanks for especially the second, non cluttering method!
Would like to see that more often!
Excellent article. Many thanks :)
Excellent , Realmente muy interesante, thanks ….
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.
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!
Wow – brill article and tutorial – cannot wait to give this a try!
Good collection of live examples and nice detailing.
Let’s *’hover’* ;)
Thank you for the inspiration! I agree, I don’t think people use hover to its fullest potential.
Blog design Lab
Very usefull, Thanks !
Thanks, very good post, great examples.
Thank you for the inspiration! I agree, I don’t think people use hover to its fullest potential.
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!
very super site
Some very nice examples. A couple of uses here I wouldn’t have thought of but a great selection. Thanks!
Nice examples and inspiration. I like hovers.
Great article. I love your first example of adding an arrow. It’s simple and effective.
nice post! good collection of previous tutorials to enhance the creativity of the beginners.
Very nice examples of the Hover pseudo class versatility. Thanks !!
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!
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. :)
Really nice!! Thanks for taking the time… Just what I need for a project :¬)
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!
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!
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
I heard about this on the Boagworld podcast. Great stuff!
Great stuff and good tip! Specially the tool tip – additional information.
Thank you :-)
Great, I can take some of these ideas away and I’ll be using them today.
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!
add your new site here
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
thank it is the topic
Thanks for it. its great.
Muhammad Usman Arshad
thanks to share, it’s very helpful.
I hate to admit it, but hovering and other DHTML tricks makes my life easier and my users/customer happier.
Learned some new hover tricks! Very nice, thanks for sharing.
really usefull article – will def. try this later ;D
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.
Thank you my friend …
This is an awesome post. Tooltips and fine details like these are the things that make modern web design fun, organized, and usable. Wonderful.
very kool, more useful…
Thanks Thanks What’s the problem here? Google could bury the meager profit number from even the biggest media conglomerates.
these are awesome!
thanks for putting in the effort to get this list together
Thank =)=)=) you http://www.cennet.gen.tr webdesignerwall Thanks
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.
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.
Excellent tutorial help much to order and specify all that our site have.
http://www.oterodesing.com Spanish Web design
You are amazing. really nice site.
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.
these are awesome! thanks
thanks! i was having trouble with mouseover/mouseout and the demos gave me exactly what i was looking for :)
nice comments styling by the way
Thanks for that!
I was talking about gucci, wasn’t I?
Its amazing how many amazing things you can can do to add a littel bit of extra oomf to a design.
Specially the tool tip
very interseting read thank you
great work thanks alot for that tutorial
I hope you will keep updating your content constantly as you have one dedicated reader here.
Thank you for introducing me know.
Thank you for your good advice.
The image hoverblock is very eloquent and dead simple. Thanks for this resource!
Best technical and tutorial design, This is a good and I will use for fix my picture.
Recently i am looking fot the white iphone 4 conversion kit. If you have any recommendation, plz tell me. I will be very grateful!
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.
This is a very good tool, Thank you.
isteklerinde bulunman normal
I was reading something else about this on another blog. Interesting.
thanks thats great website
แทงบอล แทงบอลออนไลน์ บาคาร่า บาคาร่าออนไลน์ sbo sbobet ibc ibcbet gclub ruby ไฮโล กำถั่ว สล็อต หวย หวยออนไลน์
Dundee Web Designer
Nice post. Really like the jQuery tooltip to thanks for that.
Different thinking, contains a problem to produce several possible solutions.
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.
i like it
Brajesh kant pathak
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.
this is really very helpful
thanks for this article