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