Rollover Image Effect Tutorial – 2 Creative Ways to Make an Awesome Image Effect

Rollover Image

I this tutorial I will make a simple rollover image effect in two ways. I did not used any Javascript, only simple HTML and CSS3.

What is a Rollover Image effect?

The rollover image effect is a CSS3 or HTML trick to swap an image when you hover the object with the mouse. When the mouse leaves it will revert back to the original image. Rollover images are preloaded into the page HTML when is loading so this effect will have a smooth transition between images.

How image rollover effect works ?

Basically, in both ways, we need two images (you can also combine them in one image). The first image is shown when the mouse is not hovering the object. The second image it will be shown when you hover the object. You can use this tricks to make awesome buttons (for sharing or anything else). My personal favorite: you can use it to switch over a black and white to a colored image banner. Of course, you can choose other ways to make this rollover image effect but this one is super simple. Anyone with a basic level of CSS or HTML can do it.

Method 1 – Rollover Image with HTML only

With this method, we create a rollover image effect using only HTML, nothing else. We achieve this using onMouseOver and onMouseOut attributes of the ahref (link) tag. Basically, you will have a <a href=”#”></a> and an <img> tag inside that link.

<a href="URL ADDRESS">
<img src="Image 1 URL" onmouseover="this.src='Image 2 URL'" onmouseout="this.src='Image 1 URL'" />
</a>

 

URL ADRESS – if you want to send the user to a custom URL when he clicks on the image.

Image 1 URL – This is the first image that will be shown when the user is NOT hovering over the object.

Image 2 URL – The image that will be shown on hover.

You can create this rollover image effect by uploading your images anywhere. Is required to have 2 images. You will not have enough control by using “Rollover Image HTML method” but is easy to achieve. You must replace the bold text with your own links. I recommend that images should have the same width and height.

Method 2 – Rollover Image with CSS3

This is the second way that you can use to create a rollover image effect. The CSS Rollover method will give you more control and is more flexible in my opinion but is a little bit trickier to achieve. However, with the CSS3 method you can use the same image but you need to specify the background position. I this Rollover Image tutorial i will use two images just for demonstration purposes.

We will give a class of .rollover for our object. You can use it for style the <a> tag or you can wrap it inside a <div>.

.rollover {
display : block;
height:***;
width:***;
background-image:url( IMG-1 ); 
}
.rollover:hover { 
background-image:url( IMG-2 ); 
}

 

If you use the CSS method to create a Hover Image Effect and you choose to have only one image, you must use background-position CSS property. Bellow is an example on how this rollover image effect looks like. I used another method, just changed the image filter (from black and white to color) but the same can be achieved using the methods above.

Rollover Image Effect Demo

This tutorial is made for beginners but this should not stop you to use this in creative ways.
That’s all, now you know how to make an image rollover effect.
Enjoy!