Creating rollover images using CSS

Images or graphics are one of the most vital aspects of websites, as they are the ones that add elegance to a website to attract millions of people to browse it on a monthly basis. Still, there are people who think exactly opposite, and give less importance to the images and graphics on their website, and at the end they regret it. So it’s always better to give them importance since the beginning. Having said that, today we are going to discuss a different case of rollover images, and tell you how you to create them using CSS. But before that lets understand what image rollover actually is.

Image Rollover

Basically, image rollover is nothing but a combination of two images, which are used to create a ‘call to action’ button such as ‘Read More’, something that you might have already seen on innumerable pages. In a rollover image, the actual or primary image or you can say the image you see at the first instance gets replaced by the secondary image once a user hovers over it with a mouse cursor. This is a nice practice, also used in creating navigation bars for websites. The benefit of image rollover is that once the user hovers over a certain button, or let’s take a case of navigation bar only, the user can easily differentiate between the selected button and the rest of the buttons available.

Types of Image Rollovers

There are three kinds of image rollovers used in website development. The first one is Disjointed Rollover, Zooming Rollover is the second one, and the last one is Fading Rollover. There is a lot of difference among all three. Let’s talk about it.

• In a Disjointed Rollover, the entire area on the computer screen except the button, gets changed and reflects what will happen if the user clicks on the button he has his cursor on.

• When it comes to the Zooming Rollover, once the user takes his mouse cursor over any button having a rollover image, the image size gets increased in a predefined ratio set by the web developer.

• And, as far as the Fading Rollover is concerned, the button image over which the user has his mouse cursor on, either fades out, according to the coding done by the developer.

What you need for making image rollovers

To make image rollovers, you only need two images that look alike, either having a slight difference in their color or colored entirely differently, which can be easily done using Adobe Photoshop or any other image editing tool.

Implementing the image rollover

Once you have both the images with you, you need to combine them into one in such a way that they are just next to each other, which can be in the vertical or horizontal direction. But while combining them, you must make sure that there is no gap between them. This technique is also known as image sprite. Now look at the highlighted CSS code below, and do exactly the same.

Note:- This coding example represents a rollover image created combining the two images horizontally.

CSS Code

a.rollover {

display: block;

width: your image width in pixel; (for example; it could be 120px)

height: your image height in pixel; (for example; it could be 40px)

text-decoration: none;

background: url(“yourimagename.jpg”);

}

a.rollover:hover {

background-position: -150px 0;

}

.displace {

position: absolute;

left: here set the margin in pixels but in negative value, which could be anything you want like -200px;

HTML Code

<a href=”here you need to place the link where you want the user to go once it clicks on the button”  class=”rollover”  title=”you can give your image any title according to the button it represents”>

Once you do all this, you will get the final result, which would be an nice image rollover button, in the exact position where you want it to be.