Hover not working in chrome

[vivkay]

Hi @thomasjbradley,

This is a minor thing, but my logo should have an opacity transition on the hover state. This works in Firefox, but not in Chrome. The logo is supposed to animate on a delay ('glow') and then be hover-able after that. The animation works, but the hover-ability only works in firefox and safari.

I included the webkit prefix:

.sa-logo {
  opacity: 0.4;
  -webkit-animation: glow 3s ease-in-out forwards;
  animation: glow 3s ease-in-out forwards;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.sa-logo:hover {
  opacity: 1;
  -webkit-transition: opacity 1s linear;
  transition: opacity 1s linear;
}

Any ideas why Chrome doesn't want to play? My chrome is a bit buggy (it keeps blocking js and doing weird things, so maybe it's just my version?)

Thanks!

V

[thomasjbradley]

It doesn't work at all for me in any browser.

I think there's a conflict between the transition and the animation—try moving the hover effect to the surrounding <a> tag and keep the animation directly on the <img>.