CODEWITHSUNDEEP
htmlcss
El1teC0der
El1teC0der

Reputation: 15

Why isn't my opacity changing after hover without using JS?

I was trying to create a book cover that would be fully visible after being hovered upon but it isn't working

#book_cover {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
  height: 71%;
  opacity: .5;
}

#book_cover a:hover {
  opacity: 1 !important;
}
<div id="book_cover">
  <a href="My Link">
    <img src="https://img.wattpad.com/cover/240632149-176-k827063.jpg" alt="...." width="100%" height="100%">
  </a>
</div>

Upvotes: 0

Views: 50

Answers (1)

Terry
Terry

Reputation: 66093

This is because the 0.5 opacity is applied to the parent. You should instead move that to the a selector instead:

#book_cover a {
  opacity: .5;
}

#book_cover a:hover{
  opacity: 1;
}

Remember that opacity will composite the entire element, including its children, so you cannot "override" opacity the way you think it works (as per inheritance).

Of course, if you want to control opacity on the #book_cover level, then do this instead:

#book_cover {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
  height: 71%;
  opacity: .5;
}

#book_cover:hover {
  opacity: 1;
}

Upvotes: 3

Related Questions