Forums

aarongmoore

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

Yes, that is the relevant code.
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.
In regards to browser support, you can check http://caniuse.com (opacity, transitions).

cnwtx

You would need to add all the other prefixes on the transition for browser support, like this:

-o-transition: opacity .2s linear;
-moz-transition: opacity .2s linear;
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear;

But otherwise, you've got the correct code.

joshuanhibbert

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

aarongmoore

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.

aarongmoore

Thanks @joshuanhibbert

treehouse : what would you like to learn today?

Forums

[Solved] Fade Areas of the Page