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

Home Forums CSS Hover on "everything but" aka "spotlight" effect

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #240130
    Alan Aurmont

    Chris Coyier once posted an article on how to achieve this effect:

    ul:hover li:not(:hover) { opacity: .5; }

    But what I’m also trying to achieve is smooth and easy hover transitions. Please help.


    Have you added the transitions?

    What have you tried?

    Do you have a demo?

    Alan Aurmont

    Hi Paulie,

    I just created a demo on my blog, but I’m not sure how or where I’m supposed to insert the “smooth hover transition” part of the code:

    a {
      color: #cccccc;
      -webkit-transition: color .5s linear;
      -moz-transition: color .5s linear;
      -ms-transition: color .5s linear;
      -o-transition: color .5s linear;
      transition: color .5s linear;
    a:hover { color: #000000; }

    Wait…the first code was lists /opacity and now you’re talking about links / color.

    Also there is no parent/child relationship such as was required before.

    Could you make a reduced case demo in Codepen. Hacking around using developer tools on a link is less than optimal.

    As to where the code would go in a Tumblr template…I have no idea.

    Oh…never mind…I see Nenad nailed it for you –

    Alan Aurmont

    Thanks anyway, Paulie. :)

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