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.
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.
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!
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
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
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?
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!
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
Hi Kyle It not working in ie6..
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.
Cool code, what if I wanted to make the image clickable though?
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,
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
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.
Hi Kyle,
Thank you so much. It worked. You’re very kind for sharing.
Best wishes,
Shaz
Thanks, just what I was looking for. Thanks for posting
[...] Pure CSS Image Hover / Kyle Schaeffer’s Web Design Blog Pure CSS Image Hover / Kyle Schaeffer’s Web Design Blog [...]
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; }
Bebright, you should replace “/path/to/myImage.png” with the path to the actual image you are using.
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; }
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!
its going through, but i unable to establish a link…tell me more
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!
oops the HTML didnt show:
Hope it will this time:
HTML
“”
Thanks again
[...] 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 [...]
Great info! Thank you for a great tutorial.
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;}
Payton, add
display: blockandfloat: leftto your buttons, and they should line up horizontally.Thanks Kyle, I’ll give it a shot. Much appreciated response. I’m liking the CSS rollover over Javascript – no more flickers!
All is good! Thanks m8.
Thank you for the easy-to-follow tutorial! After a little futzing (technical term) it’s working perfectly!
great tutorial…..but could you pls tell us how to make image move up when mouse passes over it
like http://www.triqui.com/
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?
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 !!
Hi, Tom. You’ll have to adjust the height/width values to match the image-hover you’re creating.
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
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?
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!
Thank you for the easy-to-follow tutorial! After a little futzing (technical term) it’s working perfectly!
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!!
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:
<
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 “=”)
Thankyou, superb, and simplest I’ve ever seen.
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
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.
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.
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
Hey, why bother adding the text “leaf”?
Just add the image and use image:hover
Hi, Aj. You can use a
<div>instead of an anchor tag — The only change will be that you don’t have to use thedisplay: 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.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!
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.
I like this code very much
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
Sorry the writing changed into html code!
Here it is again in note form:
<!–
Leaf
–>
Aaarg! It won’t let me show you my html!
It’s basically the html linking to style.css and then my (your) code!
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
Apologies! Sorry for the posts above. Somehow it works now?!
Brilliant stuff thank you for sharing this with us Kyle!
awesome…. thanks a lot…
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,