Change Conversations blog

3 min read

How to Create Image Rollovers Easily with CSS3

By Steve McIntyre on 6/11/15 10:00 AM



Image rollovers have been around since the days of the Flying Toasters, but back then it took some moderate skill in JavaScript to get them to work. If you had a copy of Dreamweaver, it could spit out the code for you. Now with CSS3 doing a simple image rollover with a link is easy using only HTML and a little CSS3. There are other CSS3 tricks in the same vein, but I’ll save those for a different tutorial.

What You Need

With any rollover, you need two images, or an image with two parts. You’ll need the initial state of the image and a rollover state. This tutorial uses separate images, instead of combining the two states into one image and transitioning the position when a user hovers over the graphic. I’ll be putting links on the images, but it would be easy to take this code and create your own set of rollovers without links.

I’ve made a simple set of buttons that are icons in their initial state. The hover state versions use a faded background of the same icon with a dark text overlay that explains what the icon means.

First, to keep things neat and portable, I create a div that wraps around the buttons (I call them tabs in this naming convention). Next I make a class for the individual divs that contain the tabs. This class defines the dimensions and margins. Make the dimensions identical to your graphics and use your margins to give them breathing room. These same divs will have ids so that you can define individual background images that coordinate with the initial images. These are the background images that will show when you rollover the images inside the divs. The CSS transition you’ll see is the top image fading in opacity, revealing the background image behind it when you hover over the div. Now let’s get to the code…

 How to Create Image Rollovers Easily with CSS3

.tab_wrapper {
.top_tab {
margin:5px 35px 20px;
#agriculture {
background:url( no-repeat;
#economic {
background:url( no-repeat;
#quality {
background:url( no-repeat;
.top_tab a img {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;-o-transition:
opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
.top_tab a:hover img {
.clear {

<div class=”tab_wrapper”>
<div class=”top_tab” id=”agriculture”><a href=”#”><img src=”” /></a></div>
<div class=”top_tab” id=”economic”><a href=”#”><img src=”” /></a></div>
<div class=”top_tab” id=”quality”><a href=”#”><img src=”” /></a></div>
<div class=”clear”></div>

Farm icon with rollover
money icon with rollover
home icon with rollover




contact us about responsive website design
Check out our Guide to Inclusive Language to help you communicate
  • There are no suggestions because the search field is empty.

About Change Conversations

The Change Conversations blog is where changemakers find inspiration and insights on the power of mission-driven communication to create the change you want to see.


Creative Commons

Creative Commons

© 2009- to present, Marketing Partners, Inc. Content on the Change Conversations blog is licensed under a Creative Commons Attribution-Noncommercial-NoDerivs 3.0 United States License to share as much as you like. Please attribute to Change Conversations and link to ChangeConversations.

Creative Commons License may not apply to images used within posts and pages on this website. See hover-over or links for attribution associated with each image and licensing information.