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

1 5 6 7
  1. sbo
    Dec 15, 2010 @ 2:43 am

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

    Reply

  2. Henry Peise
    Dec 23, 2010 @ 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!

    Reply

  3. Juno Mindoes
    Dec 24, 2010 @ 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.

    Reply

  4. sbobetlive
    Dec 26, 2010 @ 1:22 am

    This is a very good tool, Thank you.

    Reply

  5. oky
    Dec 27, 2010 @ 11:10 pm

    that’s great….

    Reply

  6. Uçak Bileti
    Jan 11, 2011 @ 5:03 pm

    isteklerinde bulunman normal

    Reply

  7. Ben
    Jan 13, 2011 @ 2:59 am

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

    Reply

  8. altın çilek
    Feb 2, 2011 @ 7:11 am

    thanks thats great website

    Reply

  9. bwin888
    Mar 2, 2011 @ 12:26 pm

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

    Reply

  10. Dundee Web Designer
    Mar 10, 2011 @ 9:03 am

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

    Reply

  11. dexx
    Apr 17, 2011 @ 2:32 pm

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

    Reply

  12. complex 41
    Aug 4, 2011 @ 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.

    Reply

  13. guu
    Sep 26, 2011 @ 1:53 am

    i like it

    Reply

  14. Brajesh kant pathak
    Nov 17, 2011 @ 7:06 am

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

    Reply

  15. รถมือสอง
    Apr 3, 2012 @ 4:52 am

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

    Reply

  16. DymoLabels
    Jun 1, 2013 @ 6:12 am

    hi
    this is really very helpful
    thanks for this article

    Reply

1 5 6 7

Leave a Reply