Easiest Way to Create a CSS Rollover for an Image

The Easiest Way to Create a CSS Rule for Image Rollover

When wanting to be able to hover over an image and have it replaced by another image, CSS allows you to accomplish this without the complex ‘mousein’ javascript techniques. This I have found to be the most efficient way of creating an image rollover that doesn’t interfere or even need javascript.

First you want to make your CSS rule: (I use id rather than class or span in this instance)

#chads-image-swap-1 {

width: (width of original image); height: (height of original image); background: url (images/yourimagenamehere.jpg);

}

#chads-image-swap-1 img:hover {

opacity: 0;

}

*It is important to make sure the image background you use above is the exact same size and height of the image you’re wanting to swap out once you or someone hovers over the image, otherwise it won’t look correct and you’ll be able to tell immediately.

Now for the HTML:

<div id=”chads-image-swap-1″><img id=”swap-1″ src=”images/yourimagenamehere.jpg” alt=”ideaforgestudios” /></div>

 

That’s it, really simple. Just don’t forget to link your images to the correct folder, as one or both will not show up and you’ll recognize this immediately. CSS made easy.

An example is here below: