Hover on "everything but" aka "spotlight" effect

[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.

[Paulie_D]

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 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; }

[Paulie_D]

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

[Alan Aurmont]

Thanks anyway, Paulie. :)

[Author]

Posts