Easy CSS Rollover Images

Ever wonder how some images change when you roll your mouse cursor over them? CSS can be used to create a rollover image effect that is lightweight and easier to manage than the Javascript alternative. Here, I’m going to explain two different methods for creating a rollover image effect, both using background image replacement techniques.

Example 1 – Two images

In the first example I’ll be using two different image files, one being the original image and the second being an image edited to have a lighter opacity than that of the original. One advantage of this technique is how easil you can control the images being displayed, all without the use of Javascript.

Click here to view the working example.

Here’s the HTML code for this example:

<div id="rollover">
<a href="#"></a>
</div>

You may be asking yourself: “Wait, there’s no image there?!”, and if you’re unfamiliar with this technique, I don’t blame you. Let’s take a look at the CSS to understand what’s going on:


<style type="text/css">
#rollover {
width: 500px;
height: 375px;
border: 1px solid #000;
}
#rollover a {
display: block;
background: url('cssrolloverimage1.jpg') no-repeat;
width: 500px;
height: 375px;
}
#rollover a:hover {
background: url('cssrolloverimage2.jpg') no-repeat;
}
</style>

Using CSS, we make all the <a> tags inside the <div> tag with the ID “rollover” appear as block elements (display: block). Items given the display value of “block” in CSS tend to behave like the HTML elements DIVs, headings, and BLOCKQUOTEs. The reason we want our <a> tags to appear this way is so that we can define a custom width and height for that particular element to fit the dimensions of our images.

Pay close attention to this bit of CSS:

#rollover a {
display: block;
background: url('cssrolloverimage1.jpg') no-repeat;
width: 500px;
height: 375px;
}
#rollover a:hover {
background: url('cssrolloverimage2.jpg') no-repeat;
}

This is where our rollover effect is taking place. Now when the link is displayed, you will see the first image with the lighter opacity. When you place your mouse over the image, it will be switched to the full opacity image.

Example 2 – One Image

This next example is often used in navigation menus that incorporate a background image for the links. One background image is used for both the regular link state and hover/selected states. The rollover effect is achieved by using varying background image positions. One advantage of this technique is that only one image will be loaded into the browser. It’s a bit impractical when using larger images, and you have to manually edit each image to include both a “inactive state” and “active state”, but it’s still a very useful technique.

Click here to view the working example.

Here’s the image we’ll be using in this example:

CSS Rollover Example 2
Photo by: http://flickr.com/photos/marimoon/

When viewing the image by itself you see both states. One is the lighter opacity (bottom) and the other is the regular opacity (top) that will only be visible when the mouse is placed over the image.

Let’s look at the HTML:
<div id="rollover">
<a href="#"></a>
</div>

You’ll notice that it’s exactly the same as the previous example, this is separation of design and content at work. The differences lay within the CSS:


#rollover {
width: 500px;
height: 375px;
border: 1px solid #000;
}
#rollover a {
display: block;
background: url('cssrolloverimage3.jpg') no-repeat;
background-position: 0px -375px;
width: 500px;
height: 375px;
}
#rollover a:hover {
background-position: 0px 0px;
}

Like the example before, the <a> tag is display as a block element. We then specified the background image (seen above). What’s new is the “background-position” property, which specifies the position of the background image within the element it is appearing. You can position the background image in several ways, but we want to be absolute in our placement, so we’ll specific the position on the X-Axis (horizontal) and Y-Axis (vertical).

background-position: X Y

The rollover effect is achieved through a bit of hide-and-seek. We hide the upper portion of our background image by positioning the image at 0px on the x-axis (horizontal) and -375px on the y-axis (vertical).

#rollover a {
display: block;
background: url('cssrolloverimage3.jpg') no-repeat;
background-position: 0px -375px;
width: 500px;
height: 375px;
}

To make the switch, we reposition the background image when the mouse is hovering over our <a> tag, this time to 0px on the x-axis and 0px on the y-axis, displaying the previously hidden portion of the background image and hiding the previously visible portion.

#rollover a:hover {
background-position: 0px 0px;
}

Download the Examples

Advertisements

One thought on “Easy CSS Rollover Images

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s