Easiest Way to Create a CSS Rollover for an Image

 In Miscellaneous, Uncategorized, Web Design, Wordpress

css rollover imageThe 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:

ideaforgestudios
Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Start typing and press Enter to search