Image_Rollovers_With_CSS3_Flying_Toaster_flickr

 

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

CSS
.tab_wrapper {
width:730px;
height:110px;
}
.top_tab {
width:100px;
height:100px;
float:left;
margin:5px 35px 20px;
}
#agriculture {
background:url(http://cdn2.hubspot.net/hubfs/395217/Images/BLOG/rollovers/farm_icon_over.png) no-repeat;
}
#economic {
background:url(http://cdn2.hubspot.net/hubfs/395217/Images/BLOG/rollovers/money_icon_over.png) no-repeat;
}
#quality {
background:url(http://cdn2.hubspot.net/hubfs/395217/Images/BLOG/rollovers/home_icon_over.png) 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 {
opacity:.01;
}
.clear {
clear:both;
}

HTML
<div class=”tab_wrapper”>
<div class=”top_tab” id=”agriculture”><a href=”#”><img src=”http://cdn2.hubspot.net/hubfs/395217/Images/BLOG/rollovers/farm_icon.png” /></a></div>
<div class=”top_tab” id=”economic”><a href=”#”><img src=”http://cdn2.hubspot.net/hubfs/395217/Images/BLOG/rollovers/money_icon.png” /></a></div>
<div class=”top_tab” id=”quality”><a href=”#”><img src=”http://cdn2.hubspot.net/hubfs/395217/Images/BLOG/rollovers/home_icon.png” /></a></div>
<div class=”clear”></div>
</div>

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

 
 

 

 

 
contact us about responsive website design
Posted by Steve McIntyre on 6/11/15 10:00 AM

Topics: Website Design and Development

Share This Post

    
The Guide to Inclusive Language to help you communicate

    About Change Conversations

    Hello and welcome. We invite you to explore Change Conversations for inspiration and insights on the power of communication to create the change you want to see in the world.

    Follow This Blog

    Follow Marketing Partners on LinkedIn Follow Marketing Partners on Twitter Follow Marketing Partners on Pinterest Like Marketing Partners on Facebook Follow Marketing Partners via RSS

    Subscribe

    Recent Posts

    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.