CSS Image Hover link

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Image Hover link

Can't get the hover image to show up properly

genevevex

7:50 pm on May 29, 2008 (gmt 0)

Alright, I hope this is a simple fix, maybe something that I'm just overlooking, but for the life of me I just can't see why it isn't working. All I want is for a black and white image to appear as the link, and when you hover over the link, it shows a color image. However, all I seem to be able to get is the black and white image.

Here is my current code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

.yo a {
background: transparent url('color.png') no-repeat;
display: block;
width: 140px;
height: 136px;
}

.yo a:hover {
background-position: 136px 0;
}

Setek

12:38 am on May 30, 2008 (gmt 0)

It's because you have an image that will sit in front of the background image. It's called a background image :) It will sit in the background, behind actual elements.

What could possibly work is adding:

.yo a:hover img { visibility: hidden; }

Which should remove the

bw.png

on hover, so it will display the background image. You may need to remove your background position, I'm not sure what you're trying to achieve with it sitting 136px from the left edge of the anchor, which when given the image width of 140px, will mean you only get to see 4px worth of background image.

genevevex

12:21 pm on May 30, 2008 (gmt 0)

Ah! Thanks so much. That really helped me figure it out. Though when I added that line, the top image wasn't in exactly the same place as the bottom; I got a weird flicker with the movement. Also, the border around the image disappeared on mouse-over.

So I tweaked a bit, and this is the working code:

.yo a {
background: transparent url('bw.png') no-repeat;
display: block;
width: 140px;
height: 136px;
}

.yo a:hover {
background: transparent url('color.png') no-repeat;
}

I replaced the picture in the <a> tags with a 1px clear gif image, the same size as my background images. This seems to work with the hover just fine.

My only problem now is that now my images are in a line down the page. I need them to be side by side. I tried changing display:block to display:inline, but when I do that the images don't appear correctly. I just get a small rectangle of the image cut-off at the bottom of the square where the image is supposed to be. Any thoughts on this?

Setek

12:28 pm on May 30, 2008 (gmt 0)

You'll need to float the anchors to get it to sit side by side.

Problem is, then the parent element that contains all these items will have no children that are in the natural document flow (floating removes it from that) so the parent element will have 0 height. This may not be a problem if there's nothing on them, but you may need to clear it if you had a background colour or anything like that on the parent element (

div.yo

)

[edited by: Setek at 12:29 pm (utc) on May 30, 2008]

genevevex

12:53 pm on May 30, 2008 (gmt 0)

Mmm... no, the 0 height isn't an issue. Rather, when I float them left they do exactly that: go left. The client wants them all in the center of the page. The only way I can think to do that would be to put in a spacer image on the left side that's also floated left. That would work to push them towards the center, but they wouldn't really be centered.

Someone with a smaller screen resolution would have the actual link images going off the right side of the page. Same case scenario if the window was resized.

Setek

1:02 pm on May 30, 2008 (gmt 0)

If you know the exact width of the combined amount of images, set the parent container's width to that and set

margin: 0 auto;

to the parent container and it will be centered.

genevevex

1:22 pm on May 30, 2008 (gmt 0)

YES! That worked fantastically! Thanks so much! You completely helped me solve all my problems!