CODEWITHSUNDEEP
htmlcss
user7323199
user7323199

Reputation:

Opacity on hover doesn't work

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>

Upvotes: 1

Views: 1752

Answers (2)

amarnath
amarnath

Reputation: 785

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

Upvotes: 2

Deathstorm
Deathstorm

Reputation: 847

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

Upvotes: 2

Related Questions