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

Question

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>

If you are talking about changing book_cover's CSS check this https://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element — Tushar Shahi, Jun 22 '21 at 14:27
I think it's because `#book_cover` and `#book_cover a` opacity properties are different — Meowster, Jun 22 '21 at 14:34
and `width="100%" height="100%"` should be specified in css; in html you can specify width or height to improve your rendering performance but in pixels not percent — Meowster, Jun 22 '21 at 14:39
@mplungjan ok, but `#book_cover` is a parent element for `a` and changing `#book_cover` opacity affects `a` also — Meowster, Jun 22 '21 at 14:42

Terry · Accepted Answer · 2021-06-22T14:39:02.127

3

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

edited Jun 22 '21 at 14:39

answered Jun 22 '21 at 14:25

Terry

63,248
15
96
118

Why not just `#book_cover:hover {` – mplungjan Jun 22 '21 at 14:28
@mplungjan Well it really depends on which element OP wants to toggle the opacity on :) – Terry Jun 22 '21 at 14:37
@mplungjan Updated my answer to handle the alternative – Terry Jun 22 '21 at 14:39
@terry, I created another element "#book_cover a{" and stored the opacity in there, and it worked, so thanks for the idea – El1teC0der Jun 22 '21 at 15:46

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

1 Answers1