Fade out surrounding content for attention

Transparency can be a handy tool when you want your users to focus on specific content. When I was creating my site I decided to put all of my latest tweets and songs I’ve listen to in the sidebars but adding all of this content really distracted from the main content of the page. My solution was to make the sidebars semi-transparent so you could still see the content but it doesn’t distract as much, then the sidebars become opaque if you hover over them.

I recently saw a great use of opacity in a great (and free) WordPress theme called Splendio by Vlad and Elena Scanteie. In many sections of their theme if you hover over a specific section it will fade out the surrounding content. This gives a great visualization and interaction with your user that allows them to focus more on the content that they are hovering over. Essentially this is the almost the opposite of what happens with my sidebars.

Recent comments

Normal state

Recent comments on hover

On hover

View demo Download example

HTML

<aside id="recent-comments">
<h3>Recent comments</h3>
<ul>
<li><span>Francois</span><a href="#">Facete audiam no vix. Mei duis ...</a></li>
<li><span>Gigi</span><a href="#">Te ancillae referrentur nam, duo conceptam ...</a></li>
<li><span>Vlad</span><a href="#">Eos tale ancillae ut. Hinc doming ...</a></li>
<li><span>admin</span><a href="#">Pri ex animal vidisse feugait, duis ...</a></li>
<li><span>Mr WordPress</span><a href="#">Hi, this is a comment. To delete ...</a></li>
</ul>
</aside>

CSS

#recent-comments ul li {
-moz-transition: opacity .25s linear; /* Firefox */
-o-transition: opacity .25s linear;  /* Opera */
-webkit-transition: opacity .25s linear;  /* Chrome and Safari */
transition: opacity .25s linear;
}
#recent-comments ul:hover li {
opacity: 0.4;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE8 */
-moz-transition: opacity .25s linear;
-o-transition: opacity .25s linear;
-webkit-transition: opacity .25s linear;
transition: opacity .25s linear;
}
#recent-comments ul li:hover {
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
}

This is the basics of what it takes to get the fade effect to work. This does not include the styling for things like background colors, fonts, etc. To get that smooth fade effect we’re using CSS transitions and setting each with an animation time of .25 seconds.

The first section for #recent-comments ul li is the default state. The CSS transition here is used only when the user removes their mouse from the entire recent comments block (mouseout). By default this section has opacity: 1 so that is what it goes back to.

The second section, #recent-comments ul:hover li sets each list-item’s opacity: 0.4 (40%) when the user hovers over the unordered list and also makes that fade by setting the transition time to .25 seconds.

Lastly we want to make the list-item that is currently being hovered completely opaque so it’s easy to read, so we set the opacity: 1.

View demo Download example

About Seth

Digital marketer and web professional from Des Moines, IA.

9 Comments

  1. Anon on June 2, 2011 at 12:35 pm

    Does not work in IE. Haha.

    Pretty neat.

    • Seth Stevenson on June 2, 2011 at 1:03 pm

      Good point. The CSS property “opacity” will work in IE9, but I just added the -ms-filter for opacity so it will work in IE8 as well.

  2. Matt on June 2, 2011 at 3:36 pm

    I like the concept and how lightweight it is (you don’t get the clunky feel that you get from past transparency / opacity kludges like PNGs or -ms-filters), and it does look nice.

    The designer in me says if you don’t want people to really notice this content, why have it on the front page at all? The user in me asks why I have to hover over something in order for it to be entirely readable.

    Either way – this technique does have its uses. Thanks as always for sharing your knowledge!

    • Seth Stevenson on June 2, 2011 at 3:46 pm

      A lot of people have been confusing what I do in my sidebars for what I mention in this post. Essentially what I show in the demo is about the opposite of what I do on my site.

      My mistake for mentioning my sidebars in the first place, I think that made it more confusing since they’re different ideas.

  3. David on June 2, 2011 at 3:59 pm

    This looks absolutely great. I am looking forward to implementing this in some of my personal projects, thanks!

  4. Mike on June 2, 2011 at 4:53 pm

    I like it, but the usability expert in me keeps wanting you to add something to disable the effect on mobile devices where there is no hove, only touch.

  5. Daniel Strube on June 3, 2011 at 11:47 am

    You should use disqus comments.

    • Seth Stevenson on June 3, 2011 at 1:24 pm

      Maybe, I use it on some other sites I run. It’s ok. 🙂

  6. Ewout on June 7, 2011 at 3:23 am

    Nice, clean and simple implementation!

Leave a Comment