Pure CSS Image HoverJan 5, 2009

Many site designs will feature varying types of image “hover” states, where an image or background image changes when you move your mouse cursor into that area of the page. Traditionally, this change in image is handled via JavaScript. It’s fairly easy to write a small script that swaps out images on mouseover, but there are a number of disadvantages to this approach that have pushed many web developers toward using a CSS-only method of achieving this exact same effect. This tutorial describes exactly how to implement a pure CSS image hover effect.

The Image

The biggest difference between a traditional JavaScript image hover and a pure CSS image hover is the image, itself. When using CSS to achieve this effect, the static image and the hover image are actually contained within the same image file. Basically, we’re displaying the image and cropping it so that only one image state is displayed at one time. In order to do this, we’ll omit the <img> tag and display the image as a the background-image of an <a/> (anchor) tag instead.

Let’s look at an image that could be used as a CSS hover image.

Hover image

Simplistic Markup

As you can see, both static and hover images are contained within the same file. In order to display only half of the image at one time, we’ll apply it as a background color to an HTML block element. Here is the HTML for this example:

<a class="myButtonLink" href="#LinkURL">Leaf</a>

The CSS

As you can see, the HTML is extremely simple. We’re doing everything in CSS, so this is where the real magic happens:

.myButtonLink {
	display: block;
	width: 100px;
	height: 100px;
	background: url('/path/to/myImage.png') bottom;
	text-indent: -99999px;
}
.myButtonLink:hover {
	background-position: 0 0;
}

We’re using the CSS psuedo-element hover to apply the mouseover image effect. When your mouse pointer moves over the “myButtonLink” element, our CSS slides the background image (using the background-position property) appropriately, giving us our mouseover image. This is simple, fast, and efficient! You’ll use less files and space on your server, clients will have to download less data, and older computers will render your content much faster.

The Result

Move your mouse over the image to see the hover in action.

Leaf

And there you have it, a pure CSS approach to image hovers. You can apply this method to links, <div/> tags, and just about anything else you can imagine in your site’s design. Happy styling!

Share this article:
  • Digg
  • del.icio.us
  • StumbleUpon
  • Twitter
  • Facebook
  • LinkedIn
  • Technorati
  • Mixx
  • Design Float
  • Google Bookmarks
  • RSS
  • PDF
  • Print
  • email

33 Responses to “Pure CSS Image Hover”

  1. mariette.bisson@cantire.com says:

    Hi:

    When I mouse over the leaf – it does not work.
    When I click the “Click here for more examples of this technique” and mouse over the 3 images you have on that page (i.e. the bubble, the star and the cloud)- nothing happens there either.

    Why is it not working….

    I need to get the mouseover images feature working in SharePoint very quickly so I am looking at examples and source code that will enable me to do that urgently.

    I would appreciate all your help on this.

    Thanks
    Mariette

    Thanks
    Mariette

  2. mariette.bisson@cantire.com says:

    Hi:

    When I mouse over the leaf – it does not work.
    When I click the “Click here for more examples of this technique” and mouse over the 3 images you have on that page (i.e. the bubble, the star and the cloud)- nothing happens there either.

    Why is it not working….

    I need to get the mouseover images feature working in SharePoint very quickly so I am looking at examples and source code that will enable me to do that urgently.

    I would appreciate all your help on this.

    FORGOT TO MENTION – I have 5 different image buttons to do….

    Thanks
    Mariette

  3. Kyle says:

    Hi, Mariette. I am not sure why it wouldn’t be working for you; I’ve tested this on a number of browsers and operating systems and it seems to work fine.

    What is the internet browser/operating system you are currently using?


  4. If you want to read a reader’s feedback :) , I rate this post for four from five. Decent info, but I have to go to that damn yahoo to find the missed parts. Thanks, anyway!

  5. Dennis says:

    Simple and great. Love the fact that its one picture (that the hover loads when the page loads)… Couldn’t be done much more simple ;)

  6. pete says:

    Hi Kyle It not working in ie6..

  7. Kyle says:

    Hi, Pete. IE6 doesn’t support pseudo elements (:hover) on any tags except for the anchor tag (A), so you won’t see the hover effect in IE6. IE6 users are used to seeing some abnormalities in many sites, so I would say that omitting a hover effect is probably the least of the worries that you’ll have when optimizing for IE6 users. This site, for instance, uses a lot of transparent PNG images, and it looks rather bad on IE6, but sometimes it’s more practical to design your site to be lightweight and accessible rather than dropping in a bunch of javascript to handle your fancy effects and rollovers on all browsers.

    That’s my opinion, anyway. IE6 is on a steady decline (in the past year alone, it’s dropped about 12% in usage statistics), so I tend to design so that my sites appear and function well in all browsers (accessibility is key), but the fancy stuff that doesn’t really affect how the page works can be secondary in priority. I’d rather my rollovers be fast and efficient on most browsers than heavy and compatible on all browsers.

  8. Dave says:

    Cool code, what if I wanted to make the image clickable though?

  9. Kyle says:

    Hi, Dave. Great question! Making this image clickable is easy! You can use the exact same markup and CSS as I’ve shown in my post above, except you’ll want to use a normal [A] tag instead of the [DIV] tag. You can apply this image hover CSS to any page element in your site, even links.

    The only difference is that by default, anchor tags (A) will display as inline elements, so they won’t work very well when you’re setting a width and a height. To fix this, just add “display: block;” to the “.myImage” CSS styles.

  10. Sher says:

    Hi,
    This is an excellent post except I don’t know how to use it.
    If I use this in a blogspot blog where do I add this code when I edit html and what code do I type to place it in the body where I’d like to see it instead of using widgets?
    Thanks for reading my comment.
    Sher

  11. Kyle says:

    Sher,
    This technique involves three elements, which include (1) the HTML, (2) CSS, and (3) the image. I’m not familiar with blogspot, but I would imagine that you could insert the HTML directly into your post. You can try putting the CSS into a <style type=”text/css”>…</style> block within your post as well (replace “…” with the CSS from my post). Once your image has been uploaded somewhere, make sure you change the path in your CSS to match.

  12. Sher says:

    Hi Kyle,
    Thank you so much. It worked. You’re very kind for sharing.
    Best wishes,
    Shaz

  13. Matt Sturt says:

    Thanks, just what I was looking for. Thanks for posting


  14. [...] Pure CSS Image Hover / Kyle Schaeffer’s Web Design Blog Pure CSS Image Hover / Kyle Schaeffer’s Web Design Blog [...]

  15. bebright02 says:

    No matter what I do or where i place your code in my html note pad, the image
    will not show up. I put every thing in one folder and the text shows up in the web page but no image. I must be doing some wrong.

    .

    myImage { width: 100px; height: 100px; background:

    url(‘/path/to/myImage.png’) no-repeat; background-position: 0 -100px; }
    .myImage:hover { background-position: 0 0; }

  16. Kyle says:

    Bebright, you should replace “/path/to/myImage.png” with the path to the actual image you are using.

  17. bebright02 says:

    Kyle, nothing I try seems to work.
    The image does not want appear. Can you
    tell me if this is wrong?

     

    .myImage { width: 100px; height: 100px; background:url=myImage;no-repeat;

    background-position: 0 -100px; }
    .myImage:hover { background-position: 0 0; }

  18. Kyle says:

    Bebright, yes there are numerous errors in your CSS. I would recommend going through W3School’s great CSS tutorials before attempting to use advanced CSS techniques like in my post above.

    http://www.w3schools.com/css/default.asp

    Good luck!

  19. Anuwar says:

    its going through, but i unable to establish a link…tell me more

  20. Daydah says:

    Thanks for this! I was able to use this with two images inside a table for display – Let me share:
    HTML

    CSS
    .corp{
    background: url(‘../images/link_hm_corporate_dwn.jpg’) 0 0 no-repeat;
    height:44px; width:237px;
    }
    .corp:hover{
    background: url(‘../images/link_hm_corporate_up.jpg’) 0 0 no-repeat;
    }

    It worked brilliantly!

  21. Daydah says:

    oops the HTML didnt show:
    Hope it will this time:
    HTML

    Thanks again


  22. [...] that I think could be helpful to you: how to create hover text with html and how to make a hover image with ONLY CSS, no JavaScript (Greta, I think you inquired about this?). Sweeet. The last tutorial is especially [...]

  23. Print Outlet says:

    Great info! Thank you for a great tutorial.

  24. Payton Jass says:

    Just a quick question.

    I’m trying to have 4 separate rollover images with links to each of them. I’m getting the rollovers to work any everything, except they’re spacing them vertically instead of horizontally. I tried things like adding a ‘display: inline’ property on the #button img … If you can give me some input, that’d be great.

    Here is my HTML/CSS:

    3D
    Web
    Print
    Photography

    #button {
    width: 950px;}
    #button img {
    display: inline;}

    .button_3d {
    display: block;
    width: 200px;
    height: 227px;
    background: url(‘images/3d.jpg’) bottom;
    text-indent: -99999px;}
    .button_3d:hover {
    background-position: 0 0;}

    .button_web {
    display: block;
    width: 200px;
    height: 227px;
    background: url(‘images/web.jpg’) bottom;
    text-indent: -99999px;}
    .button_web:hover {
    background-position: 0 0;}

    .button_print {
    display: block;
    width: 200px;
    height: 227px;
    background: url(‘images/print.jpg’) bottom;
    text-indent: -99999px;}
    .button_print:hover {
    background-position: 0 0;}

    .button_photography {
    display: block;
    width: 200px;
    height: 227px;
    background: url(‘images/photography.jpg’) bottom;
    text-indent: -99999px;}
    .button_photography:hover {
    background-position: 0 0;}

  25. Kyle says:

    Payton, add display: block and float: left to your buttons, and they should line up horizontally.

  26. Payton Jass says:

    Thanks Kyle, I’ll give it a shot. Much appreciated response. I’m liking the CSS rollover over Javascript – no more flickers! :D

  27. Payton Jass says:

    All is good! Thanks m8.

  28. Keith says:

    Thank you for the easy-to-follow tutorial! After a little futzing (technical term) it’s working perfectly!

  29. dentisto1990 says:

    great tutorial…..but could you pls tell us how to make image move up when mouse passes over it
    like http://www.triqui.com/

  30. Tom says:

    I guess the image on the same file calculate like this:

    When marking end if image (non-hover) to end of (hover) as for your image its 100px.
    Is this how u do it?

  31. Tom says:

    Sorry^^ perhaps bad explain

    But I was refering to the Hight: 100px;
    Perhaps many here got confuse where u get 100px from when the image itself isn’t 100px.
    But after statet 100px the code reconise the hover start AFTER 100px !!


  32. Hi, Tom. You’ll have to adjust the height/width values to match the image-hover you’re creating.

  33. Tom says:

    Ty, I found out how to.. created some myself and its working like charm.
    Pretty easy stuff without have to run any script, CSS for the win :-)

Leave a Reply