How to Make Your Genesis Website’s Logo Fade (on Hover) Using CSS Transitions

Today we’re going to have a little fun.

I’m going to show you how you can use CSS transitions and sprites to make the logo in your Genesis theme fade in and out when you hover over it. If you’re using a modern browser, go ahead and preview the final product below.

This is one of those cool little details that works really well with progressive enhancement. It isn’t an essential feature — since it won’t work with IE9 and below — but it can add some some nice flair to your site when used properly …

The first step is to create our logo sprite. If you need a short primer on what sprites are, check out our previous article on the subject.

I’m not going to detail all the Photoshop instructions since every logo will be different, but the basic idea here is to increase your canvas size, duplicate your image, and desaturate that duplicated image.

  Download the Sample PSD Logo File (168.1 KiB, 923 hits)

When you have your logo sprite ready, upload it to your theme folder. It’s normally easiest if you stay with the Genesis naming conventions and use the name “logo.png”.

Open up your style.css file and find the section that deals with the header image. Since we’re using the eleven40 theme as our example, it starts on line 216.

This is the CSS that’s currently there:

/* Image Header - Partial Width
------------------------------------------------------------ */

.header-image #title-area,
.header-image #title,
.header-image #title a {
	display: block;
	float: left;
	height: 90px;
	overflow: hidden;
	padding: 0;
	text-indent: -9999px;
	width: 265px;
}

.header-image #title-area {
	background: url(images/logo.png) no-repeat;
}

.header-image #description {
	display: block;
	overflow: hidden;
}


/* Image Header - Full Width
------------------------------------------------------------ */

.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a {
	width: 100%;
}

And this is our current html.

<div id="title-area">
    <h1 id="title">
        <a href="#" title="Genesis Test">Genesis Test</a>
    </h1>
    <p id="description">Just another WordPress site</p>
</div>

We’re going to accomplish this by layering our background image on top of itself.

The full color version of the image will be on the bottom in the containing div, and the desaturated version will be in the anchor on top. Since we’re using a sprite and only one image we’ll use CSS to adjust the position so that the correct image shows in each place.

Once the images are in place we can use an opacity transition to fade out the desaturated background image in the anchor, which will reveal the full color image in the containing div.

Here’s the updated CSS:


/* Image Header - Partial Width
------------------------------------------------------------ */

.header-image #title-area,
.header-image #title,
.header-image #title a {
	display: block;
	float: left;
	height: 90px;
	overflow: hidden;
	padding: 0;
	text-indent: -9999px;
	width: 265px;
}

.header-image #title-area {
	background: url(images/logo.png) -266px 0 no-repeat;
}

.header-image #title-area a { 
	-moz-transition: opacity .6s ease-in-out; 
	-o-transition: opacity .6s ease-in-out;
	-webkit-transition: opacity .6s ease-in-out;
	background: url(images/logo.png) no-repeat;
	display: block;
	height: 100%;
	transition: opacity .6s ease-in-out;
	width: 100%;		 
}

#title a:hover,
#title a:focus {
	opacity: 0;
}

.header-image #description {
	display: block;
	overflow: hidden;
}


/* Image Header - Full Width
------------------------------------------------------------ */

.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a {
	width: 100%;
}

We really only changed a couple things …

We added background positioning for the sprite in the #title-area div:

.header-image #title-area {
	background: url(images/logo.png) -266px 0 no-repeat;
}

And we added in transition and hover properties for our anchor element:

.header-image #title-area a { 
	-moz-transition: opacity .6s ease-in-out; 
	-o-transition: opacity .6s ease-in-out;
	-webkit-transition: opacity .6s ease-in-out;
	background: url(images/logo.png) no-repeat;
	display: block;
	height: 100%;
	transition: opacity .6s ease-in-out;
	width: 100%;		 
}

#title a:hover,
#title a:focus {
	opacity: 0;
}

One last note: If you don’t have widgets in your header, you may need to adjust the width property for the .header-full-width div to match the width of your background image.

And, if you need some additional inspiration, check out these examples:

My Blog – joshbyers.com
United Pixel Workers
Google Chrome Logo

Enjoy!

Comments

  1. Nice!! Very slick – thanks for sharing, Josh!

  2. Awesome! I am currently re-designing my website and have a similar rollover effect set up for my logo, but not as nice as this one. I’ll definitely be trying it out ;)

  3. Thanks for sharing the code. This transition effect is really awesome and will use it on my blog. One small change I’ll make is, will display lighter version all time and the brighter one after mouse is hovered.

  4. Great tutorial – CSS really is amazing, eh? I’ll be testing this out with a couple of my eleven40-based sites later today!

    • With CSS3 there are so many really cool things we can do – this is just the tip of the iceberg!

      • I’m still a long way from being proficient but I’ve always admired CSS for its simplicity and flexibility. Tutorials like this one only add to what I know; thanks for that!

  5. Hi Josh

    Nice touch – how would I get it to ‘reverse’ so the glow happens on hover? (see http://goo.gl/vSTLE)

    Thanks

  6. Thanks Josh for sharing this cool tutorial.
    I’ve applied it in 5 minutes and it’s perfect :).

    Thanks

  7. how and where do you add the html part?

    • If you are using Genesis and a child theme the html should be there already. If you’re not using Genesis then you would just need to play around with the css selector names and your markup.

      • I am using Genesis, and the eleven40 child theme to try this out, but I don’t see that html in the functions.php, home.php or style.css. I see this:

        /** Add the page title section */
        add_action( ‘genesis_before_content_sidebar_wrap’, ‘eleven40_page_title’ );
        function eleven40_page_title() {
        genesis_widget_area( ‘page-title’, array(
        ‘before’ => ”,
        ) );
        }

        but don’t see the html. I know php generates the html but how do you add the html you have to it?

  8. Sweet! Is it okay to use a custom css to add the changes? I feel more comfortable there than messing with the original stylesheet.

    • These changes go in the stylesheet of your child theme which is okay to change. But if you don’t want to change that you could create another stylesheet and include it in your functions file if you wish.

  9. Love this post. Implementing soon!

  10. Thanks for this cool tut, I will implement this on my Genesis Theme and will get back here to post my experience.

  11. Excellent Post, Josh. Can’t wait to implement this on my blog.

  12. Cool thing!
    With a nice tutorial like this i think even i can accomplish this and will have some fun with it. I also see where i could use this in my website for some navigation images. Practically this is a perfect solution to an issue i was facing. Problem solved. Thanks. :)

  13. Great tutorial Josh, and I liked your joshbyers.com site as well. I have a question regarding Genesis because I do not see how to put in a link to the div tag “title-area” tag. I want to be able to have a logo and link in that area, but do not see where to edit the tag or modify the link, unless I hardcode it.

    • If you are using Genesis the title-area automatically uses the url that is in the “home” field in your general WordPress settings.

  14. This is awesome and I can’t wait to try it out. Instead of a header image, I have image links that sit on a background and I would love to apply this same coding on those. Can that be done?

  15. Thanks for the tutorial. This is a great tutorial.

  16. How cool is this! I had learned how to do a basic opacity on hover, but had never seen the fade option. I love it!

    Josh, could you point me to the best place to learn how to use sprites? I have yet to figure out exactly what the deal is with using them although I sense their importance and would really like to learn the basics. Many thanks!

  17. oh thank you josh! its so cool a really good design for websites, i will try this on mine!

  18. Excellent tutorial, Josh. I’m going to pitch this logo feature to an existing client of mine. Thanks for teaching me something new today.

  19. Can this be done on a submit button? If so, how?

    • Hey Dave,

      The process would be exactly the same you are just applying it to a different element in your markup. So instead of using the “.header-image #title-area a” element you would replace that with your “input” element.

  20. Thanks Josh for sharing this great tutorial.
    I’ve applied it in my site(jobotix[dot]com) and it’s perfect :) .

    Thanks

  21. Thanks Josh Byers for the detailed tutorial. I have to shown to my friends and they think am a magician!

  22. Hi there!

    Very nice tutorial indeed. I love to implement that. However, is there any other way to use IMAGE as the logo in genesis? Currently, we are using the css stuff, the text-indext: -9999px; which is, according to Matt Cutts, a bit spammy because we are hiding something. He said to use image as logo instead.

    I am not sure if, I am in the proper place to ask this. :(

  23. Very good example of doing this, love how it fades to a stronger and more grabbing button/logo. Going to do this now. :)