How to Create Roll Over Images for Your Blog

3 years ago

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!
This is an article written by a member of the SheKnows Community. The SheKnows editorial team has not edited, vetted or endorsed the content of this post. Want to join our amazing community and share your own story? Sign up here.

More from living

by Cursha Pierce-Lunderman | 2 days ago
by Fairygodboss | 4 days ago
by Fairygodboss | 9 days ago
by Justina Huddleston | 9 days ago
by Aly Walansky | 10 days ago
by Fairygodboss | 11 days ago
by Justina Huddleston | 14 days ago
by Aly Walansky | 24 days ago