Fade Areas of the Page

[Anonymous]

I would like to know how to replicate the faded effect on the sidebar here: http://srobbin.com/

The sidebar is dimmed, keeping focus on the content area. When you mouse over the sidebar, it brightens to a more readable opacity/color.

The code seems to be:

.ghost { opacity: .4; /* -webkit-transition: opacity .2s linear; */ }

.ghost:hover { opacity: 1; }

My questions are (1) is that the code, (2) how does it work and (3) will it work in all browsers?

[joshuanhibbert]

1. Yes, that is the relevant code.
2. Opacity works as the name suggest that it would; 0.4 is the equivalent of 40% opacity. So when hovering, the element goes from 40% to 100% opacity, the transition is just there to make the effect smoother.
3. In regards to browser support, you can check http://caniuse.com (opacity, transitions).

[joshuanhibbert]

@cnwtx Don’t forget -ms-transition. IE10 will support transitions, and we want to be as future proof as possible.

[Anonymous]

Is the transition element necessary? If I just wanted the opacity to change, does there need to be a transition involved?

[joshuanhibbert]

There doesn’t need to be a transition, hence it being commented out in the code you found on srobbin.com. That being said, it is certainly a nicer effect with the transition.

[Anonymous]

Thanks @joshuanhibbert

[Author]

Posts