CODEWITHSUNDEEP
cssimagerollover
computersaurus
computersaurus

Reputation: 175

Rollover without image change

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!

Upvotes: 1

Views: 495

Answers (3)

jeroen
jeroen

Reputation: 91734

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

Upvotes: 5

Marcin
Marcin

Reputation: 1276

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.

Upvotes: 3

Dan Breen
Dan Breen

Reputation: 12924

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;
}

Upvotes: 2

Related Questions