Creating Rollovers Using Basic CSS

attachment-51de7705e4b0297f6a3bc0b1

By: Joy Laforme. Photo via: Bloesem

Image rollovers can be done in your blog design, or in an individual blog post if you’d like. They are a fun way to give your reader an additional interaction with your content. Here’s a simple tutorial on how to create an image rollover for your own blog.

Define your two images.

They should be the same width and height, with whatever difference in style, illustrative element, or text that you may want in the hover state, as shown above.

You’ll want to upload your images to a file server, or your blog’s media library, so you can easily access the image URL

Insert your image using an HTML id.

This can be in your blog’s widget, your blog layout, or in a blog post. See the example code below:

Define two CSS elements.

You’ll need to define these CSS elements within your CSS editor. Depending on your blog host, it will most likely appear under the “Themes” section of your site. It can also appear under “Style Editor”.

The first element will be to define the original image.

#rollover{

width: imagewidth px;

height: imageheight px;

display:block;

background-image:url("ENTER URL HERE");

}

The second element, will be to define what the rollover image will look like.

#rollover:hover{

width: imagewidth px;

height: imageheight px;

display:block;

background-image:url("ENTER URL HERE");

}

Adding “ :hover” to the end of a CSS element, defines the hover state for that item. You can use this for many CSS elements like defining links, paragraphs of text, header text, social media buttons, and more.

Save your work, and enjoy!

To learn more about coding, be sure to check out Joy's class this month! 

Comment

Eden Hensley

Marketing creative, community engagement specialist, technophile, photographer, food and wine enthusiast, and the founder and editor-in-chief of The Road to The Good Life, a lifestyle blog about appreciating and enhancing your life by being grateful for the "haves" instead of lingering on the "wants." There you will find personal stories about my life and family weaved in with real-life, achievable entertaining tips, recipes for hearty home cooked meals, and DIY projects for capturing and sharing memories. I believe the best place to swap stories is over a shared meal, preferably a Thai-meal served family style, and teach an online introduction class to Thai Flavors and host the Family Dinners at The Station supper club in San Francisco.