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!
