Pure CSS Image Hover

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!

269 comments

  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..

    • ... says:

      using hover in CSS seems to be a recent invention as CSS is currently in version 2, and development for version 3 is occurring now. as such older browsers so not support it.

  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.

    • Hi, i have been reading this thread, and i would be interested to learn how to add some lighting effects to this site http://www.fotopacks.com/fotografo

      As you can see the dropdown menu and it’s sub menu’s conflicts with the text in the content pane to the right.

      My solution/idea was to apply some kind of lighting effect, that when you hover over the ‘main menu’ the background/all webpage content is slightly obscured by a Filter/Graphic? or no light.

      Can you help me please… Please.

  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 :-)

  34. rocketGirl says:

    Kyle, this code works amazingly! I really appreciate your clear and concise instructions.
    I am always one, however, to push the limits and have a project that is in percentages rather than pixels.

    Here’s my question:
    How can I make this background image grow and shrink dynamically with it’s container?

  35. Kyle says:

    Hi, rocketGirl. In order to make the image grow/shrink on hover, you would take a very similar approach. You’ll create an image “sprite” that contains both the smaller and larger version of the image, and you can “slide” the background image around so that when the user moves their cursor over the element, the larger image is shown.

    The only real difference from my above tutorial is that the width/height of your hover element will need to match the larger image so that you can ensure that everything stays in place when the user hovers over the element. I hope that makes sense!

  36. Recepti says:

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

  37. girdy says:

    There have been some questions on how to make the div “click-able”….This is what I did to make a div an actual link:

    And this was my css for the div above:
    #mydiv {
    background: url(../images/mypic.jpg) no-repeat;
    width:70px;
    height:75px;
    margin-left:905px; /**this was just for positioning on the page**/
    }

    #mydiv:hover {
    background: url(../images/mydiv_roll.jpg) no-repeat;
    width:70px;
    height:75px;
    margin-left:905px; /**this was just for positioning on the page**/
    }

    Note: that if ONE thing is spelled wrong it won’t work. It needs to be EXACT. Mine wasn’t working at first and I went through the actual folders to find my picture that I used and realized that it was in the wrong spot. Just double check EVERYTHING, even if you think you know it’s there…check it again.

    It took me some searching to find something that would actually make the div click-able (and work) and have the link open in another window. That along with this website helped me get it all together! Hope this helps some of you out there.

    Thank you so much for the information above. It was the key that solved my puzzle!!

  38. girdy says:

    Oops..my message above got cut off. I must have gone over!!

    Here is the div for a click-able link that was suppose to be above the css code above:

    <

  39. girdy says:

    Ok, I’m realizing this is taking the code I’m typing in. Sorry…

    +div id=”mydiv” onClick=”window.open(‘http://www.somewebsite.com’,’somewebsite_window’)” style=”cursor:pointer;”=+/div=

    (please sub in “” for these “=”)

  40. Dave Ashton says:

    Thankyou, superb, and simplest I’ve ever seen.

  41. running_onCode says:

    How big did you make your image in photoshop because mine is working but the flicker of the image change is too much and I cannot get it exactly right. I keep growing and shrinking the canvas in photoshop and changing the width and height in the css code to no avail.

    regards,

    r_oC

  42. Running, the size and position of your images are very important, because it’s very hard (as you know) to move things around using CSS. You have to be pixel-perfect.

    It helps if you create your Photoshop image with the single image size FIRST. Put a guide at the very bottom of the image, and then alter the canvas size (CTRL + ALT + C) and double the height (i.e. change the canvas size from 100×150 to 100×300). Align your new (hover) image with the guide that now appears in the center of the canvas. When you do this, you know your CSS adjust will be exactly equal to the original image size (i.e. position: 0 -150px).

    Hope this helps.

    • Toni says:

      I think this is the issue I’m having too. My images are moving around just a tad. The switch isn’t tight enough. I tried to follow your response above but it’s not working. Something is off…

  43. running_onCode says:

    Thanks! I managed to get it right on point. I’ve manipulated the code and I’m using your tutorial to help others on another site. I’ve give credit. I hope that is fine. :D

  44. Aj says:

    Oh yea, I would have used a link as well…but what if you didn’t want to use a link? Well, how about using a div block with the image as the background then change background on hover? – Yea i do not like IE :)

  45. Aj says:

    Hey, why bother adding the text “leaf”?

  46. Aj says:

    Just add the image and use image:hover

  47. Kyle says:

    Hi, Aj. You can use a <div> instead of an anchor tag — The only change will be that you don’t have to use the display: block; in the CSS. I add the “Leaf” text to the HTML because that’s what search engines and screen readers will see — everyone else sees the image, but having more descriptive text makes your design more accessible.

  48. Pavel Enzi says:

    Good Article! I made a button on Illustrator and following this instructions, but now I´m looking a way to link my button to a contact form built on SimpleModal from this website http://www.ericmmartin.com/projects/simplemodal-demos/ {contact form} .
    Thanks Kyle, excellent work!

  49. Suzan says:

    Yay! I got the code to work. However I’m running into a problem. I’m using a larger image and need to have it scaled down. I’d rather not resize it outside of expression web because the text gets a little distorted. So how would I resize the image that I am using as the background image? I tried background-width: 120px but that didn’t do anything.

    Thanks.

  50. prum seng says:

    I like this code very much

  51. Joe says:

    Hi this is brilliant I can see exactly how it works but I just can’t seem to get the image to appear and can’t get it to work.

    All the files are in one folder html, style.css and leaf.png (which is your image copied and saved).

    Here is my HTML:

    Leaf

    And my (your) CSS:

    .mybuttonlink{
    display:block;
    width: 100px;
    height: 100px;
    background: url(leaf.png);
    text-indent: -99999px;
    }
    .mybuttonlink: hover{
    background-position: 0 0;
    }

    Any help would be appreciated! Thanks

  52. Joe says:

    Aaarg! It won’t let me show you my html!
    It’s basically the html linking to style.css and then my (your) code!

  53. Joe says:

    Simply doesn’t seem to work. No image appearing. Have exactly copied and pasted your Html into a body tag on a new html doc.

    -Linked HTML to the CSS
    -Renamed your png as leaf.
    -CSS, HTML and leaf in the same folder
    -Linked the background image correctly in CSS to URL’leaf.png’

    And no image. Please note my level of knowledge. I’ve done all the w3cschools tutorials, and have already created a low-mid detailed website.

    Would appreciate some relief from the frustration! Thanks

  54. Joe says:

    Apologies! Sorry for the posts above. Somehow it works now?!

    Brilliant stuff thank you for sharing this with us Kyle!

  55. spbrai says:

    awesome…. thanks a lot…

  56. Cesar Castro says:

    Hi,

    Great tutorial, by the way I would like to know if there is some kind of search engine penalty for hiding the text of the link.

    Thanks,

    • Clive says:

      Cesar,
      I’m also concerned about search engine ratings. So I replaced the text-indent: -99999px; with text-align: center; I also replaced the title in the ButtonLink code with the space character so that the title is not displayed on the image. I would appreciate anyone’s comments on my approach.

  57. spacerobot says:

    I love it, but I dont love making one image file out of two, because of registration and its another step, but oh well, the joys of CSS

  58. Karin says:

    The code is awesome .thanks for good info.

  59. mell says:

    Thanks for this :)

    By the way, in the CSS, instead of using “block” (because it lines up the images horizontally and places break lines before and after the image) I used “inline-block” instead.

  60. inne says:

    hi.. thank you very much for posting this.
    It is absolutely what am I looking for…
    formerly I didn’t imagine pure css can do this stuff.
    it’s kind a cool!
    thanks!

  61. PaperSky says:

    Hi I have used this posts css code and html for a rollover image which has worked fantastically. I would like two images to do this, but they both sit in the same block on my html website. I tried to get the other image to do the same as the other, but the css and url seem to conflict and i only either get no image or two of the same. So basically my question is how can i get two separate ones to work… hope this makes sense.

    PaperSky Design

  62. PaperSky says:

    sorry i have sorted it :)

  63. stk says:

    Wow … a 2009 article about pure-CSS image rollovers. Where was this in 2005? LOL.

  64. Sanjay says:

    Hey love the link and want to use it in my nav bar, i want to be able to have an image of a glass and then when you hover over it it changes the image which shows the glass to be full – however is there any way i could show it getting filled up slowly so you can actually see it getting filled up – would i need to use jquery for this or jscript ?? or could i do multiple images with a delay between movements of the image in css if that makes sense, if you could point me in the rigth direction i will do the rest and post back when successful, thanks

  65. NarenMaharjan says:

    thanks borther your work is good

  66. JB says:

    thanks! been looking all over for how to get buttons to line up horizontally, your “add display: block and float: left to your buttons” works a treat. Brilliant.

  67. Hello! This is rally nice!

    Can U tell me how to align the links horizontaly??

    My page is here -> http://dl.dropbox.com/u/2167398/search/pt/search.html

  68. Kyle says:

    Ricardo, any time you have a “block” element (i.e. “display: block;”) in CSS, you can make them stack up horizontally by adding “float: left;” to that element in CSS.

  69. Danny says:

    Nice work! I used your CSS technique on 2 different images and it still works (thought I’ll try it):
    .myButtonLink {
    display: block;
    background: url(name.png);
    text-indent: -99999px;
    }
    .myButtonLink:hover {
    background: url(name-hover.png);
    }

    Thanks

  70. JimH says:

    Thanks for the very clear example, which worked perfectly (after several other instructional models did not). This probably a stupid question, but I have table with 2 images in each row for a total of 5. (It’s the facade of a building – you can highlight each of the floors or the number of the floor next to it.) I got the building photo rollover to work (swaps out a brighter version), but when I put the same code in the table cell next to it, the “number 5″ graphic appears directly overlapping the left edge the building photo, instead of appearing the table cell next to it on the right.
    I’m guessing this is some kind of incompatibility between tables and CSS, How do I get this whole 2×5 matrix of images (each with a rollover state) to line up in a proper matrix or table?
    Thanks…

    • Kyle says:

      Hi, Jim. You are correct in your assumptions that tables have some strange ramifications and odd behavior when it comes to CSS.

      Rather than using a table to display your matrix of images, might I suggest using DIV tags. You can actually make DIV tags line up horizontally using the CSS declaration float: left. Give it a try and you might find that it works much better for you.

  71. Jan says:

    Great tut and it was easy to follow. I was able to create a test page that works in all browsers, but when I tried to add this to sharepoint 2007, I can’t get the hover to work. If I look at my code in firefox, the hover tag doesn’t appear. Any idea what I’m missing? I added the a tag and !important to try to force it, but neither work. Thanks for any pointers.

    .myButtonLink, .myButtonLink a {
    display: block;
    width: 234px;
    height: 40px;
    background: url('http://stg-lifenet/sites/lifekb/SiteCollectionImages/bt_training_dev.jpg') bottom;
    text-indent: -99999px;
    }
    .myButtonLink:hover, .myButtonLink a:hover { !important
    background-position: 0 0;
    }

  72. gtagamer says:

    Simple but awesome script. thanks bro.

  73. nater says:

    Thank you for this great bit of CS, it’s simple and works well. I have a question, I’m also using– a:hover {color: #FFFFFF; background-color: #333333; text-decoration: none}
    to highlight my text links. Can I block that from the image hover CS above to not highlight double image? I tried– border: 0px; background-color: transparent; and that doesn’t work

    • Kyle says:

      Nater, the background-color: transparent should do the trick; try to make sure the style isn’t being overridden by anything.

  74. nater says:

    Thanks Kyle, that worked!

  75. rashmani says:

    Hi Kyle,

    thanks a lot, easy to follow and working a treat.

    rash*

  76. Serena says:

    Hey Kyle,

    Very simple and useful – came across your site to figure out how to get my description on hover.
    I know it seems simple but can’t find a way to do it… and no I’m not looking for a sprite or a tooltip for an “alt” or “title” tag.

    I already have the hover effect I want by using:

    #content a img:hover {filter:alpha(opacity=60); opacity:.6; cursor:pointer;}

    What I reall want to add is my image’s description to appear on hover like so:
    {font-size: 11px; font-weight: bold; color: #fff; text-transform:uppercase; position:absolute; width:160px; height:160px;}

    I’ve added a class to my image, then used the code in CSS but I still can’t figure it out.

    PLEASE help!

    • Kyle says:

      Serena, you can’t really add a styled tooltip to an img element using only CSS. If it were me, I’d display my image as a CSS background image (much like in my post above), and place a span element inside of it that is hidden by default. That way, you could do something like .myButtonLink:hover .descriptionSpan { display: block; } to make it show up on mouse hover.

      Hope that make sense. Otherwise, you might want to check out some “CSS Tooltip” articles that you can find around the internet. Best of luck.

  77. Serena says:

    I really don’t… I have looked at it, and tried to use tooltips but even when it worked, it didn’t flow as well, took forever to load, I thought this would work with simple CSS?

    My images are four different images in a table in my content, put in a table…

    I really appreciate your quick reply, here’s an example of my HTML if you can take a look at it and tell me exactly what span I would add to create this, it would be great:

    *div style=”float:left;”>*span class=”full-image-float-left ssNonEditable”>*span>*a class=”myButtonLink” title=”xxxxx” href=”http://xxxxx.com”>*img src=”/storage/albums/xxxxx.png” alt=”xxxx” />*span>*/a>*/span>*/span>*/div>

  78. Serena says:

    I get it now – briliant, thanks! All I need to figure out is how to position it at 160px because it’s actually showing below my picture with this CSS in place:

    a.imgtooltip {position:relative}
    a.imgtooltip:hover {z-index:0;}
    a.imgtooltip span { display:none; }
    a.imgtooltip:hover span {position:absolute; width:160px; height:160px; font-size: 11px; font-weight: bold; color: #fff; text-transform:uppercase; }

  79. Serena says:

    Kyle – one last question… I’m trying your way in order to get my files to load at the same time as the page… though I don’t think I get it as I need to use a background url to hover in order to get this result.

    ex:

    .myButtonLink { display: block; width: 100px; height: 100px;
    background: url(‘/storage/widget/xxx.png’) no-repeat;
    text-indent: -99999px;}

    .myButtonLink:hover { background-image:url(/storage/widget/xxx2.png); background-position: 0 0;}

    i don’t understand how you get this effect without linking to your second pic.

    Please help.

  80. Pen says:

    Is it possible to create this hover effect with a single image using an image map on two separate parts of one image (functioning independently)? Basically, if I had one image containing two buttons. How would you go about this?

  81. Serena says:

    aha, figured it out – with a div id (imgHover) and a href link with my img src, I used this CSS

    #imgHover { width: 200px;
    height: 200px;}

    #imgHover:hover { background: url(‘/storage/widget/tourdates2.png’) no-repeat;text-indent: -99999px;
    background-position: 0 0;}

  82. Serena says:

    Nope.. links are not working and I get a “jolt” effect when first hovering…

    Nate, any clue? Here’s the html I’m using:

    div id=”hoverAlbums”> a href=”http://…/albums/”> img src=”/storage/albums.png” alt=”Albums” /> /a> /div>

  83. madhubabu says:

    its very very very…………………………………………good site sir.

  84. Jim C. says:

    Kyle,
    Exellent article, but I have a question:

    I like to “tweak” the settings of CSS to see the effects. In doing so, I discovered that I couldn’t change the position of the hover image unless I assigned units to it like so:
    “.myButtonLink:hover {
    background-position: 0px +10px; }”

    Is your code, “background-position: 0 0;” , actually changing the position of the image to top-left, or is the image going to a default position that just happens to be top-left? Or is the failure of this line : “background-position: 0 10; }” to change the position just do to my browser (I”m using IE8)?

    • Kyle says:

      Hi, Jim. background-position uses a coordinate system (measured from the top left corner of the element to which it is applied), and the exact coordinates that you’ll need may differ depending on the size of your image and the arrangement of your image file.

      If you’re having trouble, try using percent instead of pixels. For instance, background-position: 100%, 100%; will ensure that you background image is drawn from the bottom right-hand corner of the element instead of the top left corner.

  85. Claudiu says:

    using your trick will not display the Leaf text from inside the a tag.
    any way to make the text inside the a tag to show ?

  86. leanne says:

    Thank you so much for this article, it’s been a huge help! I am a bit confused, though… I have a horizontal menu of four links. Each of the images line up horizontally except the fourth one, which shows up underneath the first image. I’m probably just missing something somewhere, but, if you could help me, that would be awesome. :)

    .seniors {display: block;
    display: inline;
    float: left;
    width: 135px;
    height: 134px;
    background: url(‘nav-seniors.png’) bottom;
    text-indent: -99999px;}
    .seniors:hover {background-position: 0 0;}

    .families {display: block;
    display: inline;
    float: left;
    width: 136px;
    height: 134px;
    background: url(‘nav-families.png’) bottom;
    text-indent: -99999px;}
    .families:hover {background-position: 0 0;}

    .couples {display: block;
    display: inline;
    float: left;
    width: 136px;
    height: 134px;
    background: url(‘nav-couples.png’) bottom;
    text-indent: -99999px;}
    .couples:hover {background-position: 0 0;}

    .information {display: block;
    display: inline;
    float: left;
    width: 135px;
    height: 134px;
    background: url(‘nav-information.png’) bottom;
    text-indent: -99999px;}
    .information:hover {background-position: 0 0;}

    The one that isn’t in line is the information image, the last one. Let me know if I’ve done something wrong, I can’t seem to figure it out! Thank you!

    • Kyle says:

      It sounds like the items are too wide to fit into the area in which they appear, and the last item is wrapping to the next line (which is the expected functionality when you use CSS “float”). Try playing around with the widths of the items, and remember that margins and padding also contributes to the total width of each element.

  87. leanne says:

    Wow, you’re a total lifesaver! Thank you very much! (by the way, it was one darn pixel too small… haha!)

  88. Chris says:

    Thanks for the info Kyle! I have searched all over for a good tutorial for this, and yours is one of the simplest. I’m not sure why others complicate it.

    Thanks friend!

    Chris

  89. Matt says:

    I really like this example and was going to use it, however when you click the button you get an ugly looking box around flowing way left of the image.

    See: http://i.imgur.com/j3PrH.jpg

    Is this because you’re indenting the text so far left? If so why are you doing that and is there a way around it like putting   and removing the indent?

  90. Matt says:

    Sorry didn’t realize HTML was on. After the word putting above there is suppose to be a “& nbsp;” illustrating a space.

  91. Kubilay says:

    This is just great. CSS is killing Flash and Flash based web pages. Works like a charm on me. Thank you for such a great tutorial. Clever stuff.

  92. Rosa says:

    Hey, I’m trying to use this in a layout I’m building, but I’m not able to place 2 of such images (links) next to each other, as I would like to. Is there any way to do this?
    I’ve tried lots of things to fix this issue, and the only way I’m able to position them side by side is with “float: right;” but that makes them come out of the sidebar where I’d want to keep them – help?

    Thanks, great tutorial otherwise!!

    • Kyle says:

      Rosa, check out some tutorials on floating block elements in CSS. You can basically use “float: left” and then do a “clear: both” below the floating elements to make everything work.

  93. salma says:

    Pure CSS Image Hover works, but only on firefox, I have a modifed the version as so that it works on both

    .myButtonLink {
    display: block;
    width: 60px;

    text-indent: -99999px;
    }
    .myButtonLink:hover
    {
    display: block; position: absolute; width: 250px; background-color: #aaa; right:500px; color: #FFFFFF; padding: 5px;
    }

  94. salma says:

    a class=myButtonLink href=# img onmouseover=style.width=250 class=myButtonLink border=0 src=images/name.jpg onmouseout=style.width=60 /a /td

  95. Madeline says:

    Hello. I’m trying to find a code where the background image changes when hovering over an image. Not background of a div or table but the background of the web page itself. I would be so grateful if anyone has this code.

  96. anti.alias says:

    do you have any idea why this would not work on chrome and firefox when it’s perfectly ok in IE?

  97. Max says:

    I’m having trouble adding the first image, the one i want to hover is sitting on the background and it hovers to itself.
    ( i dont have the grey leaf showing, just the image that’s in the CSS)

    html :

    CSS:

    .myButtonLink {
    display: block;
    width: 100px;
    height: 100px;
    background: url(‘redBlogo-ACTIVE.jpg’) bottom;
    text-indent: -99999px;
    }

  98. sapna says:

    thanx good example ..its working

  99. Lucy says:

    Simple and easy. Perfect for swapping images in a header that I am working on. Thanks

  100. donny says:

    so I got this to semi work for me but I am having issues having it display correctly. I made a button in photoshop that is 250px wide x 50px high and there is probably a 50px gap in-between the normal and hover state on the same file. When I load the code up it cuts of part of my image and shifts the the hover state.. what gives?? I have 7 buttons I would like to add a hover image to within the same nav menu so I hope you can help.

    Thanks

  101. donny says:

    I used the ruler on firefox and measured the pixels between the leaf’s you have in the example and set up my psd file the same way. My buttons are a little wider so I made adjustments in the css but everything else is exact..

    when you say “math” are you talking about the
    .myButtonLink:hover {
    background-position: 0 0;
    }
    ??
    Shouldn’t 0 0; replace the static image with the hover in the exact same place?

    • Kyle says:

      The “math” depends completely on your image and how you set it up. This post is a demonstration of a “technique,” it’s not a tutorial. Focus on understanding the concept more than trying to copy and paste the CSS code you find in my examples.

  102. Hashim says:

    Thanks! it works great

  103. Tim says:

    Genius! Worked like a charm. Thanks! (PS, props for using League Gothic, that’s what I use, too.)

  104. Jas says:

    thanks it works great! I initially used Dreamweaver CS5 to do the rollover effect but the activeX warning always popped up. now that annoying message finally won’t appear in IE!yay!! this is definitely what I need for the websites I will make in the future
    thanks a lot again!!

  105. Sufyan says:

    hi,kyle!how are u?
    i have checked out ur example but i have still problem that how to i make a grey image like above ur example.please tell me how’s way this is possible.

  106. Ladida Cafe says:

    woww. it’s so amazing,
    mayble I’ll try it
    thanks :)

  107. Andreas says:

    I added the line position: absolute; and it worked. Thumbs up!

  108. Aaron says:

    Perfect. Worked like a charm. Thanks!

  109. Luis says:

    Excellent job! I’ve realized that it has been almost 2 years and a half now since you gave the community this sample code. I just found it today and I’m still as amazed as the other where right at publishing time : )

    Clean, As simple as it can be, Really efficient.

    A big THANK YOU!

  110. vimalraj says:

    hi,
    this rather doesn’t work on IE8 too…

  111. Nathan says:

    Hello, do you mind telling me how do I get the code for leaving the table rollover(The blog| about me |my work |contact me|[with the gadgets such as the twitter bird,rss feed, and dribble]) if you don’t mind…/ Thank you.
    -

  112. Maria says:

    Hello there
    I am struggeling with this CSS. the code in the style brackets is going in head section or in a seperate css file? And how is it exately with the include thing with CSS? Please can you help?

    • Kyle says:

      Maria, it can go in either place. I generally prefer separate CSS files, but it’s up to you. Check w3schools.com for a great introduction to CSS, including how to attach it to your HTML pages.

  113. Vibin Balan says:

    Great Example. The exact one which I was looking for. Big Thanks buddy… :)

  114. Jim says:

    Hi, Can you tell me how to change my Hover on Mouse over Larger image to span across to the left of the original thumnail image, I have 28 thumnails set at the top left corner of my page and I would like to place some thumbnails to the right of the page and have them span left?? Thanks for some great postings already!

    • Kyle says:

      Hi, Jim. That sounds completely different from an image hover. You may want to look into other options like JavaScript or jQuery.

      • Jim Dormer says:

        Hi Kyle, I will look into that, but I just thought I could reverse the code that currently works with my images spanning to the right! so I can get them to span tomthe left aswell, but not all of them, the code I have only seems to span images one horizontal direction, but what happens when I have images on both the right of the webpage and some on the left?? why can’t I have all the images displayed in the centre of the page?? Thanks for your advice my friend! I will browse your suggestions, but hope I don’t have to start from scratch? Keep up the fantastic work! these posts are an enormous help to newbees like me!! If you can reply that would be great! Jim.

  115. kaz says:

    I have 4 small image/buttons located at the lower left hand corner of my website and I have created 4 large corresponding background images. I simply want the entire background to change when i hover on each of the small images. Would your idea work with this?

  116. Phenom says:

    With this code, im using ie9 btw. It had a few problems after running a few times.
    So i changed it into:

    a.myButtonLink {
    display: block;
    width: 100px;
    height: 100px;
    margin: 1em auto;
    background: url(‘picname.abc’) bottom;
    text-indent: -99999px;
    }
    a.myButtonLink:hover {
    background-position: -100px 0;
    }

    Hopefully users with ie9 and this problem can use this edit :). Thanks.

  117. William says:

    Awesome to quote the local parlance, although probably not as “awesome” as landing on the moon or seeing a star being born, but you get the gyst.

    Thanks. Site bookmarked.

  118. Imran Ahmed says:

    Thanks, works really well!

  119. warren mayer says:

    I’ve tried to use your eloquent code in a SharePoint 2010 web page and when the page is “published”, the “background-image” line is thrown out every time. All other lines remain in place but that one line is tossed out, effectively rendering the rest of the code meaningless to the browser (IE 7 running on XP).

    Can you shed some light on this?

    adTHANKSvance (Thanks in Advance)

  120. Paul Haworth says:

    Hello,

    I’m wondering, is it possible for one hover to update two locations?

    What I’m trying to do, write a help file for batch processing files for bank transactions. So when you hover the location at the top where it gives the details for the Sort Code, it also highlights the appropriate place within the batch file to insert the Sort Code.

    I have a feeling it’s not going to be possible using this technique but figured I’d ask all the same.

    Thanks for any replies in advance.

  121. Karin Shaver says:

    Great post! It worked great for my application where I was not able to use javascript mouseover/mouseout. Thanks for the turorial!

  122. Roman says:

    I tried the same code but the ‘text-indent: -99999px;’ property shifted the text 99,999px to the right, making my page very “wide” and using the horizontal scroll-bar if you scroll all the way to the right you’ll see the text still there.

    Why is this not happening here on your page?

    I used the exact same CSS code, only my anchor was inside tags in a table.

    Is that the reason?

    If so, how can I work around that?

    Thanks! :)

  123. Derek Sneed says:

    thanks for this. ’twas helpful.

  124. This works but it will get you flagged by Google because it is a technique used by spammer-marketers. So don’t use it if you depend on Google’s indexing engine to treat you nicely.

    Stop Using the text-indent:-9999px CSS Trick
    <a href="http://luigimontanez.com/2010/stop-using-text-indent-css-trick/&quot; title="Stop Using the text-indent:-9999px CSS Trick

    • Clive says:

      Brad or Kyle or anyone,

      I’m concerned about search engine ratings. So I replaced the text-indent: -99999px; with text-align: center; I also replaced the title in the ButtonLink code with the space character so that the title is not displayed on the image. The image swap works ok in a browser, but the image does not show up in my Web authoring program. I would appreciate anyone’s comments on my approach. See my code below.

      [code]
      .myButtonLink {
      display: block;
      width: 250px;
      height: 325px;
      background: url('images/lady-double.jpg') bottom;
      text-align: center;
      }
      .myButtonLink:hover {
      background-position: 0 0;
      }
       
      [/code]

      • Clive says:

        My last line of code got messed up. It should be:
        [code] [/code]

      • Clive says:

        As you can see by my feeble attempts below, I’m unable to post my last line of LinkURL code without it changing.

      • Clive says:

        My image was restored in my Web authoring program after clicking the Refresh button. But any comments on my possible solution to the search engine problem would be appreciated.

  125. Nisar says:

    Hi Kyle. This is a great tutorial. I was looking for exactly this. I’m new to website designing. I have been working as a developer but recently had to urge to learn about designing too. Your post is very nicely explained. It works like a charm. Thanks.

  126. Oscar Grootveld says:

    How do you get both these images the exact right distance of each other so they both have an equal distance to the corners of the image in Photoshop?

  127. kiki says:

    My code isn’t working. I think the text-indent isn’t working to get rid of the word and showing the image and the hover image. You can check it out at http://kikidesign.net/public_html/wackyearrings/. Look at the top right with the words “RSS”, “Twitter”, and “Facebook”.

    help!

  128. John says:

    Great and easy to follow! I was going to use javascript but this is really cool.

  129. Thanks, it was very easy to setup and useful for me!

  130. Kjell says:

    Love the simplicity of this, but I’m struggling with using my image as a link. I have other links on my page as well (with only text), but I can’t get the image link to behave like your example – it uses the styling from the other links (for example it gets underlined when hovering). Any idea what I’m missing?

  131. Lalu Ganda says:

    it’s better than javascript, hahhahaha :D

  132. Miguel says:

    Thanks, very usefull i already saw it in another example but this is simplest and just what i needed.

    Best regards,

  133. Fat Aido says:

    I cant believe how this works! This is genius. U r blowing my mind. It took me some time to work out. Had to download the image to understand what is happening. Thx heaps!

  134. Lee Deavall says:

    Hi Kyle,

    Great Tutorial! thanks for taking the time to create it.

    If i needed to put another button underneath the first image, what code should i use?

    thanks! :)

  135. Veeramani says:

    Thank you thank u so much ITS WORKING……………….

  136. brandon w. says:

    thank you so much for sharing :)

  137. Dave K. says:

    That’s the single most cool thing I’ve learned on the Web this year. Thanks

  138. Garry says:

    Thnax so much bro……………..

  139. Vix says:

    Thanks you…it worked….;)

  140. Esh says:

    Thanks it worked great on my website, mysubwaycoupons.com, but I am showing the image on the bottom of the sprite as default, so to calculate the background-position math, I used http://spritegen.website-performance.org/ redid the sprite and it works great, you can take a look at my site and the coding.

  141. Ehsan says:

    Thanks a lot
    that was very useful

  142. samad says:

    how can we add a text below this image kindly tell me?
    thanks

  143. Hello Kyle….

    I am playing around this code since an hour and still haven’t figured out how to make it work.
    I need a clickable image with this property.

    Any help will be appreciated :)

  144. Hello Kyle….

    I am playing around this code since an hour and still haven’t figured out how to make it work.
    I need a clickable image with this property.

    Any help will be appreciated :)

  145. Tony says:

    Beautiful, thanks!

  146. fiona lynne says:

    Thanks! This was helpful but I had to make one change for it to work for me: changing your 0, 0 to be “top”. Now it works beautifully! And I’m rather a CSS beginner so the feeling of achievement is quite big!

  147. KPCTA says:

    What is the code, to put two picture side by side.

    Example
    HTML:

    CSS
    a.HiST {display: block; width: 149px; height: 150px; text-decoration: none; background: url(“images/HiST.jpg”); }
    a.HiST:hover { background-position: -149px 0; }

    a.ENM {display: block; width: 187px; height: 150px; text-decoration: none; background: url(“images/ENM.jpg”); }
    a.ENM:hover { background-position: -187px 0; }

    In this way the images one on the other positioned to the left. How to put them side by side.

    Thanks

  148. damith wanninayake says:

    Thank you for your simple and brilliant code. Saved lot of my time and i was searching that technique…

  149. Smita Sharma says:

    How to link css background image applied on hover. I have a list, on rollover i have given one image.. now i want to make it click-able. Can anyone please Help … write me @ smita.smi@gmail.com

  150. Maxx Cooper says:

    Dank je voor de handige code, daar was ik op zoek naar!

  151. Pink says:

    I love it. It is working very fine for me. thanks a lot.

  152. Mark says:

    Hey Kyle,

    Any thoughts on how to fix a hovering image that appears as a duplicate below the button? I’m having this problem on my site’s nav bar where the hovering image for one of the buttons (and for some reason, just this one) pops up below the actual button.

    Here’s my page:
    depaul.edu/writing/ncptw2012

    Thanks for any guidance!

  153. Bogdan says:

    Thx…for the css man.

  154. Claudia says:

    Hello Kyle, thanks for the post, it’s great… I have one question… I did this menu: http://www.mipequefiesta.com/question.html but I don’t know why I got those spaces between each image… I have tried padding:0px; margin:0px… etc but i dont know what is wrong… I have 15 images for this menu, this is my CSS

    [code]

    a.footA1 { display:inline-block; position:relative; width:77px; height:42px; text-decoration:none; background:url('images/footA_01.png'); }
    a.footA1:hover { background-position: 0px -42px; }

    a.footA2 { display:inline-block; width:44px; height:42px; text-decoration:none; background:url('images/footA_02.png'); }
    a.footA2:hover { background-position: 0px -42px; }

    a.footA3 { display:inline-block; width:28px; height:42px; text-decoration:none; background:url('images/footA_03.png'); }
    a.footA3:hover { background-position: 0px -42px; }

    [/code]

    etc… Can you help me?, thank you.

  155. top backlink says:

    Thanks for the tutorial, Im building my new website.

  156. tobe says:

    it’s work on my first drupal site!
    thank’s

  157. Yati Sagade says:

    Nice post :) I’ve also bookmarked your tutorials section. Thanks a ton and keep up the good work :) By any chance, can you do a HTML5/CSS3 tutorial?

  158. Terry says:

    Kyle,
    I think this is very cool. I’m trying to integrate it into my site, but I’m having an issue. The picture location will be dynamic, so I’m trying to use an inline style like this:
    [code][/code]
    The only problem is when I do that, it breaks the hover position change, and won’t move when the mouse is over it. Any clues you can give me on how to fix this?
    Thank you

    • Terry says:

      I haven’t figured out how to get it to work inline, but what I did was just created the style code for the page dynamically, and assign each individual picture it’s own id to load different pictures, and create the transition effect.

  159. Terry says:

    okay, it deleted the style portion of it. But it is style=”background: url(‘user-photo-11-0.png’)” Hopefully that shows up

  160. Clive says:

    Kyle, Works great. The only thing is I moved the styles from the current page to an external style sheet and I no longer see the image in my Web authoring program, although the image swap works fine in a browser preview. Any comments would be appreciated.

    • Clive says:

      I fixed it. I’m not sure how, but somehow I had some text somehow blocking the image. After deleting the text the image appeared in my authoring program. How embarrassing!

  161. Indika says:

    Hey, thanks Kyle! It worked for me! I used this for the social bar of my website. It is working perfectly. Thanks again…

  162. Toni says:

    I can not believe I was able to follow this. I have been having such a hard time figuring sprites out. And I did it. Thanks Kyle! Check out my results at http://www.skyemediagroup.com/sliceofgracebakery (I’m in testing mode)

  163. pradeep ranasinghe(lion worrier clan) says:

    Thanks a heaps Kyle! this is brilliant!

  164. Clive says:

    Kyle,
    Thanks for the great image swapping code. Although I’m concerned about search engine ratings. So I replaced the text-indent: -99999px; code with the text-align: center; code. And I also replaced the text title in the ButtonLink code with the space character so that the title is not displayed on the image. I would appreciate anyone comments on my possible solution to the search engine issue.

  165. charlie says:

    i dont understand the whole “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:

    Leaf” bit

  166. Tommy says:

    First of all this site looks neat, clean and simple, thanks for tutorial as well.

    But I have little more complicated solution.

    I would like Titles under picture. Title would be “link”, but in fact would not lead anywhere, it would be just to go with mouse over it. But what I would like is, to have for example 5 titles under image, and on mouse over 1 of the titles that image displays, on mouse out, it stays, until I go mouse over any of other titles.

    Please help.

  167. Tomislav says:

    I have this CSS code:

    [code]
    img.nohover {
    border:0
    }
    img.hover {
    border:0;
    display:none
    }
    a:hover img.hover {
    display:inline
    }
    a:hover img.nohover {
    display:none
    }
    [/code]

    But that only swamps image, and I have more images, and I want last image to stay, unless I go mouse over another title.

    Please if you can help. Ty.

  168. Thanks a lot, I am really searching for this. I need this for my new joomla based website.

  169. This effect is very simple css, but in present day uses many web pages. is something attractive and loves people. I too like the look of the effect on the web. as thanks for sharing your post. there is nothing better than a website with good design!

    George

  170. Dorinda says:

    Hi I am trying to do something very similar to what you are showing but I am stuck, I do not have one image file I actually have two. I know that jquery will do what I want but I dont know jquery and would like to do this with CSS, what I need is to have the image when selected be one image and when clicked off or not selected be another one.

    I could really use the help and just dont know where to start.

    Thanks in advance.
    D

  171. Kunal says:

    It worked buddy thanks a lot…

  172. fysisoft says:

    wow thats really great

  173. red says:

    bebright02 – I couldn’t get it to work either but got it to work by making 2 images

    .buttonLink {
    display: block;
    text-indent: -99999px;
    width:164px;
    height:56px;
    background-image: url(../images/h_recruit.gif);
    }
    .buttonLink:hover {
    background-image: url(../images/h_recruit_01.gif);
    background-position: 0 0;

    }

  174. Lings says:

    Here is another simple CSS code!

    Copy and paste it is sure to work. It is pure CSS. Do not forget to change the paths to your images.
    You may also change the height and width of the images.

    .image
    {
    height:300px;
    width:500px;
    background: url(firstimage.jpg);
    }

    .image:hover
    {
    background: url(hoverimage.jpg);
    }

    Have fun!

    • Kyle says:

      The problem with this approach is that you will get a “flicker” as the hover image is loaded. Much, much better to use a sprite (single image) and shift the background positions.

  175. Lings says:

    Full Code is here!

    [code]

    .image
    {
    height:300px;
    width:500px;
    background: url(firstimage.jpg);
    }

    .image:hover
    {
    background: url(hoverimage.jpg);
    }

    [/code]

  176. JJ says:

    Wow, thread for over a year!!!
    Trying to implement in a dynamic PHTML page and its not working although it works great in an HTML doc. What do I have to change to make that work, if its possible?

  177. Jim Wordes says:

    Hi Kyle! I wonder if this method is a solution for my hosted e-commerce website?
    The hosted e-commerce platform http://www.BigCommerce.com does not allow users access to their database, so I’ve been told the following type of effect is impossible because their Admin panel doesn’t have an option to load 2 different images for the same place.

    I want it to work like this:

    http://cxxvi.net/

    Do you think your method is an appropriate workaround?

  178. Kyle says:

    For those looking for an alternative to the [code]text-indent[/code] method for image replacement, you can try the following:

    [code]
    {
    height: 0;
    padding-top: [desired height of container];
    overflow: hidden;
    }
    [/code]

    This is now my preferred method.

  179. indra says:

    It doesn’t works for me.

  180. JT says:

    Since you have so graciously answered some of the other issues, I thought I would throw this one at you. I have 5 ‘sprite’ buttons that I have lined up to create a Navigation Bar (thank you for float: left). I am using an :active state (to emulate a pressed button) in addition to the :hover. Everything works great. The problem (?) I noticed after clicking on all the buttons to test the links is that when I click the Browser’s (IE 8) Back button, the previous page(s) had the last ‘active’ button still showing as pressed. It looks stuck. Is there any way to fix this?

  181. Will Luce says:

    Amazing thread! So, I am wanting to make the main homepage image change as I rollover each of the navigation buttons. Example: Large portait of a person on the left dressed in black shirt, nav on the right. When rolling over a nav button, I want the main large picture to change to a new picture. Is this as easy as what you’re explaining here or does it HAVE to be a JS thing?

  182. Kat says:

    Love it. Thanks!

  183. nice, really cool ! Thank you

  184. Chris says:

    Thanks for this tutorial. It’s exactly what I was looking for and the results are so amazingly fast and responsive. You’ve made my day!

  185. Sally says:

    Can I use this in Sharepoint without having to use SharePoint designer. Will this code work as a front-end user working on publishing pages through the browser???

  186. bea says:

    Hi – thanks for this tutorial. My problem is that although the hover-over works, the links don’t work. I guess it’s because only the text is treated as a link and that gets pushed out of the visible element; but if so how do I resolve it? Here’s the code for the menu bar I’m trying to create (within blogspot). Any help really appreciated, thanks.

    [code]

    #navbar ul {
    margin: 0;
    padding: 5px;
    list-style-type: none;
    text-align: center;

    }

    #navbar ul li {
    display: block;
    float: left;
    width: 150px;
    height: 74px;
    padding: 0;
    border: 0;
    margin: 0;
    text-indent: -99999px;
    }

    #navbar ul li:hover {
    background-position: 0 0;
    }

    #primule {
    background: url(http://4.bp.blogspot.com/-B7-GKPt8dFw/T9O9eEhps5I/AAAAAAABW8k/1tgtPSFxBgo/s1600/primule-doppio.png) right top;
    }

    #farfalle {
    background: url(http://1.bp.blogspot.com/-n6oi6-Zfbek/T9O-mNgTkoI/AAAAAAABW8s/8YIAkPv5Qk8/s1600/farfalle-doppio.png) right top;
    }

    #bruchetti {
    background: url(NOTDONEYET) right top;
    }

    #stelline {
    background: url(NOTDONEYET) right top;
    }

    Primule
    Farfalle
    Bruchetti
    Stelline

    [/code]

  187. Alicia says:

    Thanks for the useful code!

  188. Dew says:

    Here you show the css code,, but you apply java script here in your result…………..

  189. David Banjavic says:

    That is wickedly cool.

  190. Adam says:

    Hey Kyle,

    Thanks for the code.. It has helped me heaps.. Thanks! :)

  191. Jack says:

    Hi,
    Thanks for the guide first off.
    I would like to know how to make it so that the images display inline so it doesn’t return after every picture. I’ve tried using div’s but I might not being doing it right.
    If you could help, that would be great!
    Thanks,
    Jack

  192. Arend says:

    “When I mouse over the leaf – it does not work.”
    I think it doesn’t “work” because your monitor contrast level is set too high. At least I can’t see the hover-image because my LCD monitor contrast is at a high level (I work outdoors a lot)

    Regards, Arend

  193. Alicia says:

    Thanks for the tutorial! This seems like an easy thing to do, but it isn’t sometimes.

  194. Leon says:

    YOU HAVE SOLVED THE MYTH!!!

  195. Troy says:

    May I just point out the fact that a lot of peoples problems after reading this tutorial and failing, is likely to be because the author never specified linking the CSS style sheet. This is not his fault of course, as you are reading a CSS tutorial about buttons and not CSS basics.
    I’m not saying this is everyone’s problem but could be.

  196. Sean Kelley says:

    Thanks so much for posting this. I can not seem to figure it out though. I am trying to visually replicate what happens on this site ( http://www.hellomonday.com/ ) but for a non flash site. Here is where I want this code implemented for reference. http://fresh-sf.com/hellofresh/short-list/

    Here is the image I posted http://fresh-sf.com/hellofresh/wp-content/uploads/2012/02/h_sunken_castles_d.jpg and here is the code that I added in the html.

    [code]

    .myButtonLink {
    display: block;
    width: 1050px;
    height: 350px;
    background: url('http://fresh-sf.com/hellofresh/wp-content/uploads/2012/02/h_sunken_castles_d.jpg') bottom;
    text-indent: -99999px;
    }
    .myButtonLink:hover {
    background-position: 0 0;
    }

    [/code]

    As you can probably see, I am doing this in wordpress (maybe thats the problem?)

    HAAALP!

  197. Sean Kelley says:

    I should also not that I am trying to make each of these clickable.

  198. Bals says:

    Thanks For this , its very useful stuff..

  199. [...] And also, here's a tutorial on how you create a hover effect on an image: http://kyleschaeffer.com/best-practi…s-image-hover/ As I mentioned, it depends on what you need it for, I can elaborate further on both matters. Also, [...]

  200. Tanya says:

    This really helps. Thanks alot!

  201. Mummy Ninja says:

    simple and precise tutorial. just what i needed. Thank you so much!

  202. Mr Love says:

    What noone seems to think about is that if you have images turned off and CSS turned on you won’t see anything, as the “alt” text is far outside of the screen.

    A solution to this is to use a transparent (i.e. invisible) image with an Alt text, inside the A tags. You can still have the hidden CSS “alt” text, for visitors with images on and CSS off. The only downside to this is if you have both images and CSS turned off, you will see the alt text twice – but has anyone ever CSS turned off?

    Somehow I think the old JavaScript approach may be the best solution after all (you can always pre-load the rollover image to avoid flicker), as that is free of those tricks… Sure if the user has JS turned off there won’t be a rollover, but they’ll still see the image, and with images off the Alt text.

  203. Dams says:

    Hi
    great tutorial, thanks !

    I’ve images that II’m using as links. The links open on the same page. If I use this rollover I would like when I click on an image that it stays on the same image as the :hover.
    Is it possible ?

    Thanks for you help.

  204. Eric says:

    Thanks. Worked like a charm.

  205. Raja says:

    Thanks, this worked great.

  206. Joe says:

    This is really amazing! Thank you for this.

  207. Machanay says:

    Very nice thanks!!!

  208. 4DECOR says:

    Thank you for this quick solution!

  209. vidur says:

    Thanks.. Its helpfull.

  210. Rabindra says:

    Thanks to the author for this post..I was thinking to apply this in social media icons..Hope it works there too!!

  211. bingo says:

    You can certainly see your skills within the paintings you write. The sector hopes for more passionate writers like you who aren’t afraid to say how they believe. Always go after your heart.

  212. Chucky says:

    Will this work with images of apples? I tried it with a picture of a peach, but will it work with apple pictures? Does it matter what kind of apple (there are a lot of apples out there!!)

  213. Niles Ingalls says:

    excellent and clever way to do this. I enthusiastically ripped out the javascript I was using on my website in favor of this method.

  214. nikhil says:

    hey dude thnx for this type of example. its very easy to understand and useful too..

  215. Marc says:

    Kyle this article is great. It helped me achieve what I was trying to do. I’m in the beginning stages of learning HTML and CSS. My question is since the the hovered/highlighted image hides behind the static image, and the static image hides behind the hovered image, how would I space out lets say 2 images next to each other so that one isn’t sticking out?

    I’ll explain it again or with a little more detail, my nav bar is images next to each other. I wanted to put some space between the images which in result will cause the back image to show on the sides. Hopefully this makes sense with what i’m asking.

  216. [...] I will proceed copying new css lines into miscellaneous.css from this page I had already designed. I will use the css property background-position to slide a png of the logo. The bottom half is desaturated while the top part is in full colours: the :hover pseudo-element will do the rest when the pointer moves over it. In this page there’s another example of a similar code. [...]

  217. Goran says:

    Thanx for the info, neatly presented. Nice and slick design you’ve got there. I’ve just started out with CSS and this fading effect added nicely to my featured images. Ciao!

  218. Greg says:

    I’m having a problem with a css hover image swap that uses a transparent image. Instead of swapping the image it is layering the second image on top of the first and I see them both at once. I’ve used both the sprite and separate image methods with the same results. Here’s the site:

    http://www.alemarpublishing.com/2.html

    There’s a sample of the rollover using javascript just below the text area that functions properly. The HOME button is using a sprite, the others are using separate images for the hover version. Any help would be greatly appreciated!

    Here’s my css:

    #nav-home {
    background:url("../images/nav/home-2.png") 0px 0px no-repeat;
    width:109px;
    height:64px;
    margin:0px;
    padding:0;
    }

    #nav-home a:hover {background:url("../images/nav/home-2.png") 0px -64px no-repeat; }

    And here’s the HTML:

    <ul id="nav">
    <li id="nav-home"><a href="../index.html"><span>Home</span></a></li>
    <li id="nav-book"><a href="../book"><span>About the Book</span></a></li>
    <li id="nav-author"><a href="../author"><span>About the Author</span></a></li>
    <li id="nav-endorsements"><a href="../endorsements"><span>Endorsements</span></a></li>
    <li id="nav-wish"><a href="../wish"><span>Wish of the Month</span></a></li>
    <li id="nav-buy"><a href="../buy"><span>Buy</span></a></li>
    </ul>

  219. Anonymous says:

    I can’t get it.

  220. Horacio says:

    Thanks, you really help me.

  221. Hi,

    got it working perfectly, thanks.

    One question: I am using two different images and I wonder if it is possible to make the hover image 50% transparent. I did a png in photoshop with opacity set to 50% but it does not work. The image just appears brighter by 50%. Is it possible to do this?

    Best regards, Totte Annerbrink.

  222. Ramesh says:

    Thank you very much sir

  223. Lynn says:

    This script works great – except on my Droid and my iPad the original photo doesn’t come back. It does on my PC when I mouseout. Is there a workaround for this? Thank you.

  224. JOHN says:

    Could this be applied inline, like add the css to my header minus the “background: url(‘http://greenbrier.tcgdevbox.com/Greenbrier/media/test/standardone.png’) bottom;”? So then I could just add an anchor class to different images to get the rollover all through my site. I tried it but didn’t get it to work. Am I doing something incorrect? Thanks for any help.

  225. Mohsen says:

    Hi
    Thanks!!!
    Best Learning!

  226. Rosslad says:

    Thanks a million, this is great.

  227. Kata says:

    Hi Kyle

    I am trying to do something similar but am still confused. Your site has got me the closest to understanding, but I’m still stuck.

    I would like to make the thumbnail hyperlink images change in opacity when they are hovered over. I don’t want to disturb the text hover CSS, which uses “a”. I am using more than one image, so doing CSS for each image seems a bit much.

    Appreciate any help.
    Thanks