1

So, I've tried making an image change opacity when you hover your cursor over it. The problem is that changing opacity doesn't work at all.

Here is the code CSS

.jarleby {
  z-index: 10001;
  position: fixed;
  left: 43%;
  top: 60%;
  margin-left: -45px;
  margin-top: -56px;
  animation-delay: 0.3s;
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

.jarleby:hover {
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

HTML

<div class="jarleby animated fadeInUp">
  <a href="https://steamcommunity.com/profiles/76561198345955002" target="_blank"><img src="img/steam.png"></img> </a>
</div>
3

2 Answers 2

2

Something else might be overruling your CSS code. Try adding !important to the rule of opacity: 1; in the :hover section. See example below:

.jarleby:hover {
  opacity: 1 !important;
}
2

.jarleby {
    z-index: 10001;
    position: fixed;
    left: 43%;
    top: 60%;
    margin-left: -45px;
    margin-top: -56px;
    animation-delay: 0.3s;
    opacity: 0.5 !important;
    filter: alpha(opacity=50); /* For IE8 and earlier */
  }
    
.jarleby:hover {
  opacity: 1.0 !important;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}
<div class="jarleby animated fadeInUp">
  <a href="https://steamcommunity.com/profiles/76561198345955002" target="_blank">
    <img src="http://placehold.it/350x150"/>
  </a>
</div>

4
  • The code snippet runs as intended in Chrome v49.x for OS X 10.7
    – www139
    May 14, 2017 at 19:49
  • It's weird that it works when I run code snippet but doesn't work in my code. I also tried adding !important; but with no result.
    – user7323199
    May 14, 2017 at 19:58
  • Found out what was overruling it, it was the animate.css
    – user7323199
    May 14, 2017 at 20:12
  • Nice, please mark my answer, if it had helped you. Thanks
    – amarnath
    May 14, 2017 at 20:21

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.