Forums

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
    Posts
  • #240130
    Alan Aurmont
    Participant

    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.

    #240131
    Paulie_D
    Moderator

    Have you added the transitions?

    What have you tried?

    Do you have a demo?

    #240136
    Alan Aurmont
    Participant

    Hi Paulie,

    I just created a demo on my blog http://aa.tumblr.com, 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; }
    
    #240138
    Paulie_D
    Moderator

    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 – http://stackoverflow.com/questions/36377379/hover-on-everything-but-aka-spotlight-effect-how-to-make-smooth-easy-hove

    #240144
    Alan Aurmont
    Participant

    Thanks anyway, Paulie. :)

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