After letting the Anon fall into a state of neglect for a month or so I checked the traffic stats and was pretty shocked to see that it was getting a few hundred page views a day. Ah, the magic of Google Images! That was incentive enough to give it a fresh coat of paint.

This tutorial will focus on one CSS feature that I attempted for the first time – hovers with a background image.

Let’s start with some basic CSS hover code for your nav bar…

nav a {
color: #000;
}
nav a:hover {
color: #ff0000;
}

The first part of the code will make each link blank while the second part will change them to red when the cursor hovers over. That pretty basic stuff and doesn’t include any dimensions or positions – a simple hover effect.

Let’s add an image to the hover. Create an image that is proportionate to the link you want to attach it to. By proportionate I mean that the image shouldn’t be insanely large, but it could be if you don’t mind working through the code to get it to work, and by image I mean a graphic file with whatever you like on it. Upload it to your themes images folder.

Replace the code above with this in your stylesheet…

nav a {
color: #000;
}
nav a:hover {
display: block;
background: url(images/here.gif) no-repeat scroll center top;
}

That little bit of code works well if you want the hover image to appear above the link like I have in the nav bar on Anon. If the image doesn’t show entirely you could try tweaking the padding of the link a bit.

The code works equally well for sidebar links. I added a hover bullet to all of my tags…

.wp-tag-cloud a:hover, .wp-tag-cloud a:visited{
background: url(images/bulletback.gif) no-repeat right;
}

.wp-tag-cloud a:visited leaves the image there after a person clicks on it. I also tweaked a couple of individual tags…

.wp-tag-cloud a.tag-link-5 {
padding-right: 45px;
}
.wp-tag-cloud a.tag-link-5:hover, .wp-tag-cloud a.tag-link-5:visited {
background: url(images/flag.gif) no-repeat right;
}

The code above placed an American flag beside the Obama tag upon scroll over while the code below added a peace sign beside peace. Both overrode the default bullet image.

.wp-tag-cloud a.tag-link-38 {
padding-right: 25px;
}
.wp-tag-cloud a.tag-link-38:hover, .wp-tag-cloud a.tag-link-38:visited {
background: url(images/peace.gif) no-repeat right;
}

In all cases you have to identify the unique name in the code that you need to alter. I use the webmaster plugin for Firefox to view the style information. Let me know if you have any questions or need help tweaking something. If you use the code and it works for you – why not link back to devDisko?!