How to Create Roll Over Images for Your Blog

I know I’ve been doing a lot of design tutorials lately. This will (probably) be the last one for a while. So today, let’s talk about roll over images.

What is a roll-over image?

A roll over image is an image that changes when you hover your mouse over it. For instance, look at my social media icons in the left-hand sidebar. They’re yellow, right? (Yes, they are.) Move your mouse over to them and see what happens. They should turn blue. That, in a nutshell, is a roll-over image.

There are many ways to do a roll over images, but changing the color is the easiest way. (Most of the others require CSS work. We’re not going to do that today. However, if you want something besides color changes and you’re not afraid to dive into the CSS, check out this page.)

Why should I use roll over images?

The two biggest reasons to use roll over images are for clarity and cosmetics. Roll over images are a great way to make your blog look more polished and they allow your readers to see what link they’re about to click. (Which I love, because sometimes codes screw up and I click on Facebook when I really mean to click on Twitter. Roll over images will warn you when this is about to happen.)

That said, you don’t have to use roll over images. But if you want to, let me show you how!


chelseyhartman.net

Comments

In order to comment on BlogHer.com, you'll need to be logged in. You'll be given the option to log in or create an account when you publish your comment. If you do not log in or create an account, your comment will not be displayed.