Comments on: Pure CSS Image Hover

By: spacerobot

spacerobot — Thu, 09 Sep 2010 23:57:41 +0000

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

By: Cesar Castro

Cesar Castro — Mon, 30 Aug 2010 15:47:56 +0000

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,

By: spbrai

spbrai — Sun, 22 Aug 2010 16:38:30 +0000

awesome…. thanks a lot…

By: Joe

Joe — Mon, 09 Aug 2010 20:06:22 +0000

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

Brilliant stuff thank you for sharing this with us Kyle!

By: Joe

Joe — Mon, 09 Aug 2010 19:56:21 +0000

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

By: Joe

Joe — Mon, 09 Aug 2010 19:36:39 +0000

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

By: Joe

Joe — Mon, 09 Aug 2010 19:34:37 +0000

Sorry the writing changed into html code!

Here it is again in note form:

Leaf

–>

By: Joe

Joe — Mon, 09 Aug 2010 19:32:47 +0000

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

By: prum seng

prum seng — Sat, 31 Jul 2010 03:30:53 +0000

I like this code very much

By: Suzan

Suzan — Wed, 21 Jul 2010 22:38:29 +0000

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.