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.

Normal state

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