Rollover without image change

Question

Hi all!

I have a small thumbnail image that I wish to change when the mouse rolls over it. I was wondering if there was a way to do this without swapping images on the rollover. For example, through CSS could I have the opacity change on rollover? If you have any other ideas about how to manipulate the image with CSS on rollover for making a change I am open.

Thanx!

Answer 1

Try using the :hover style on a tag. It may not be supported very well in early IE editions. But you can do something like:

img {
    border: 1px solid black;
}
img:hover {
    border: 1px solid white;
}

Answer 2

With CSS3, there is an opacity option. This way you wouldn't be forced to reload an image when they hover above something.

#div {
  background-image: url('blah.png'); 
}

#div:hover {
  opacity: 0.5;
}

I'm not exactly sure if that's the right way to use it so you should use google for more examples. However, you should be careful because not all browsers might be supporting CSS3 yet.

Answer 3

You could put both images in one bigger image, use it as a background image and change only the position on roll-over.