CSS Background Rollover

4 Oct

Looking to add a little style to your image links? Let’s use CSS to add a background color that appears when the mouse hovers over the image. This style can be used on a variety of images but we’ll be looking at adding this style to affiliate buttons.

Step 1

First, we have the html for the actual affiliate button to show up:

<div class=”affiliate”>
<a href=”http://www.jacorre.com”><img src=”images/jacorre.gif” width=”88″ height=”31″ alt=”Jacorre Design Studio” /></a>
</div>

Basically, we wrap the linked image in a div and define a class of affiliate. Make note that the width of the image is 88 pixels and the height is 31 pixels.

Step 2

Since we’ll probably want to use this style multiple times on a page, that’s why I created it as a class. Here’s the CSS:

.affiliate img {
padding: 5px;
border: 0;
}

.affiliate {
float: left;
width: 98px;
height: 41px;
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
display: block;
}

.affiliate a:hover {
background-color: #CCCCCC;
display: block;
}

We add 5 pixels of padding around the image. That means the width will now be 88 plus 5 on both the left and right which equals 98 pixels. The height will be 31 plus 5 on both the top and bottom which equals 41 pixels. Making the border equal to zero removes the blue border around a linked image.

We float each div left so they line up next to each other. However, we don’t want them too close. So we add 10 pixels of margin to the right and bottom to push them away a bit.

Lastly, we add a background color to the hover.

Advertisements

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

%d bloggers like this: