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
Pingback: Pure CSS Image Hover / Kyle Schaeffer’s Web Design Blog « Vetnews
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
Pingback: WebApps: CSS tricks « UB Graphic Design
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.OMG!! Thank you!!! :D
thanks kyle.:)
Thanks Kyle, I’ll give it a shot. Much appreciated response. I’m liking the CSS rollover over Javascript – no more flickers! :D
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. :D
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,
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
The code is awesome .thanks for good info.
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.
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!
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
sorry i have sorted it :)
Wow … a 2009 article about pure-CSS image rollovers. Where was this in 2005? LOL.
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
thanks borther your work is good
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.
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
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.
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
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…
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.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;
}
Hi, Jan. What does the HTML of the link look like? Your CSS rule might not be selecting the HTML if they don’t match up.
Simple but awesome script. thanks bro.
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
Nater, the
background-color: transparentshould do the trick; try to make sure the style isn’t being overridden by anything.Thanks Kyle, that worked!
Hi Kyle,
thanks a lot, easy to follow and working a treat.
rash*
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!
Serena, you can’t really add a styled tooltip to an
imgelement 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 aspanelement 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.
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>
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; }
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.
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?
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;}
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>
its very very very…………………………………………good site sir.
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)?
Hi, Jim.
background-positionuses 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.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 ?
Sure, just remove the
text-indentproperty from my example.problem above solved … i removed the text indent ..should have seen it :p
ty btw for the article. very helpful
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!
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.
Wow, you’re a total lifesaver! Thank you very much! (by the way, it was one darn pixel too small… haha!)
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
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?
Sorry didn’t realize HTML was on. After the word putting above there is suppose to be a “& nbsp;” illustrating a space.
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.
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!!
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.
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;
}
a class=myButtonLink href=# img onmouseover=style.width=250 class=myButtonLink border=0 src=images/name.jpg onmouseout=style.width=60 /a /td
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.
do you have any idea why this would not work on chrome and firefox when it’s perfectly ok in IE?
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;
}
thanx good example ..its working
Simple and easy. Perfect for swapping images in a header that I am working on. Thanks
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
Donny, sometimes CSS work involves a little math and determination!
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?
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.
Thanks! it works great
Genius! Worked like a charm. Thanks! (PS, props for using League Gothic, that’s what I use, too.)
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!!
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.
You’ll need an image editing program like Photoshop.
woww. it’s so amazing,
mayble I’ll try it
thanks :)
I added the line position: absolute; and it worked. Thumbs up!
Perfect. Worked like a charm. Thanks!
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!
hi,
this rather doesn’t work on IE8 too…
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.
-
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?
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.
Great Example. The exact one which I was looking for. Big Thanks buddy… :)
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!
Hi, Jim. That sounds completely different from an image hover. You may want to look into other options like JavaScript or jQuery.
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.
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?
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.
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.
Awesome , etc. Pardon my grammatical slip…
Thanks, works really well!
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)
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.
Great post! It worked great for my application where I was not able to use javascript mouseover/mouseout. Thanks for the turorial!
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! :)
*Correction: “my anchor was inside TD tags in a table”.
thanks for this. ’twas helpful.
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/" title="Stop Using the text-indent:-9999px CSS Trick
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.
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?
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!
Great and easy to follow! I was going to use javascript but this is really cool.
Thanks, it was very easy to setup and useful for me!
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?
Sorry to bother you, I realised I didn’t define my “menu” class in the stylesheet.
it’s better than javascript, hahhahaha :D
Thanks, very usefull i already saw it in another example but this is simplest and just what i needed.
Best regards,
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!
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! :)
Thank you thank u so much ITS WORKING……………….
thank you so much for sharing :)
That’s the single most cool thing I’ve learned on the Web this year. Thanks
Thnax so much bro……………..
Thanks you…it worked….;)
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.
Thanks a lot
that was very useful
how can we add a text below this image kindly tell me?
thanks
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 :)
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 :)
Beautiful, thanks!
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!
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
Solved by chaging display: block; with display: inline-block;
Thanks for great post : )
Thank you for your simple and brilliant code. Saved lot of my time and i was searching that technique…
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
Pingback: Simple CSS: Hover Over Image | Dallas TX Graphic & Web Design - Kafor Media
Dank je voor de handige code, daar was ik op zoek naar!
I love it. It is working very fine for me. thanks a lot.
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!
Sorry, the correct URL is condor.depaul.edu/writing/ncptw2012