The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fade Areas of the Page

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #36759

    I would like to know how to replicate the faded effect on the sidebar here:

    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?


    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 (opacity, transitions).

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


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


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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.