CSS Rollover Image E ect - Change Image on Hover
Rollover image is a design feature where an image changes when your mouse hovers over it. Think of a
light bulb that turns on and off when you move your mouse cursor into that area of a page. When a
page is loading, rollover images are preloaded into it to ensure that the rollover effect is displayed
quickly
Code
<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>
How to create a rollover image using CSS
The Image
Place both the static and rollover image in one file and make sure that the rollover image is placed on
top of the static one. To achieve the rollover effect, we'll write a code to display the static image and
crop the hover image, so that only one image state is displayed at a time.
For this tutorial, we'll use the following as a CSS rollover image.
Creating an HTML Anchor Element for our Image
<a class="rolloverimage" href="#URL">Rollover Image</a>
Note: if you want to make the image clickable, replace #URL with the url of the webpage where you
want the link to point to.
Using CSS to Set a Background Image
To create the mouseover image effect, we'll use the :hover CSS pseudo-class. Then, we'll use the
background-position property and set the values to 0 0 to move the background image to the upper left
corner which will create the rollover effect.
<style type="text/css">
.rolloverimage{
display: block;
width: 56px;
height: 90px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQR8KygUJOKcmcuiF05VIHXl-k9okamLrAyYxXD7EL0sXgdOqziGTVR8oOdtJuKG8z-dVUM-JHu9vqGgz5t8823XpB7aOehFnlNEmOn7IjuGJkPi1yeub7n5zpMg9KrG0QKq5zesWiRTcn/s180/rollover-image-light-bulb-on-off.png') bottom;
text-indent: -99999px;
}
.rolloverimage:hover{
background-position: 0 0;
}
</style>
Note: Replace the text in blue with the url of your image file. Please pay attention on the width and
height values marked in red, these should be different depending on your file, where the height value
is for only one image and not the entire image file!
Adding Rollover Image to Blogger
To add the rollover image as a gadget: copy both the HTML/CSS codes and go to 'Layout', click on the
'Add a Gadget' link > select HTML/JavaScript, then paste the codes in the 'Content' box.
Or, if you want to add it inside one of your posts, when you create a New Post, switch to the 'HTML' tab
and paste the codes inside the empty box.
And this is how you make images swap on mouseover using CSS. Enjoy!
