Why can't I target this HTML element without parent opacity overtaking?

Question

So I have a section of text, like this:

<header>
    <section id="intro">
        <div class="container">
            <div class="hidden-box">
                <p>
                    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
                    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
                    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
                    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
                </p>
                <p class="read-more">
                    <a href="#" class="button">Read More</a></p>
            </div>
        </div>
    </section>
</header>

And I want to hide it, until a 'Read more' is clicked, and the remaining text is revealed. Before the reveal, I want the text to be semi-transparent, so as to not grab all the attention, and so I've made a hodgepodge of a styling (sass) like this

#intro
  .container
    max-width: 768px
    color: black

  .hidden-box
    max-height: 50px
    position: relative
    overflow: hidden
    color: #727272
    opacity: 0.2

  .hidden-box .read-more
    position: absolute
    bottom: 0
    left: 0
    width: 100%
    text-align: center
    margin: 0
    padding: 0
    opacity: 1

    background-image: radial-gradient(white, transparent)
    background-size: cover

  .read-more .button
    color: black
    opacity: 1
    font-weight: bold

Which works to hide the text and make it semi-transparent, until some javascript reveals it (sorry if it contains superfluous elements in this minimal example). Except, no matter what I do, the 'Read more' button is styled by its parent's opacity: 0.2 and not its own opacity: 1.

What am I misunderstanding?

Dai · Answer 1 · 2019-09-20T09:47:11.460

The opacity property's value is applied relative to the selected element's parent.
You cannot override opacity in a child element.
This means that if you have this:
```
<div style="opacity: 0.5;">
    <span style="opacity: 0.5">hello</span>
</div>
```
...then the <span>'s opacity is now 0.25 (because 0.5 * 0.5 == 0.25).

In your case, there are a few possible workarounds:

Remove opacity: 0.2 from .hidden-box and use a more specific selector that only targets the first <p> and not the second <p>. There are a different ways of doing this:
- .hidden-box p:first-child { opacity: 0.2; }
- .hidden-box p:not(.read-more) { opacity: 0.2; }
- .hidden-box p { opacity: 0.2; } .hidden-box p.read-more { opacity: 1; }
Set a translucent color property, which can be overridden (as color's opacity is not relative to a parent element's color-opacity (but is still relative to the parent element's opacity, of course).
```
.hidden-box { color: rgba( 0, 0, 0, 0.2 ); }
```

Or move the `.read-more` child outside the 'hidden-box' element, because reading the class of the parent 'hidden-box' suggest it's hidden. I don't think it needs to be an answer to this question, your answer says allot about the mechanics. — Arno Tenkink, Sep 20 '19 at 08:30

score 1 · Answer 2 · answered Sep 20 '19 at 08:34

Hi as Dai Said The opacity property's value is applied relative to the selected element's parent. So you can't change child opacity.

You can Do this by alternate way by restructuring your code like this:

<header>
  <section id="intro">
    <div class="container">
      <div class="hidden-box">
        <p>
          TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
          TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
          TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
          TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
        </p>
      </div>
      <p class="read-more">
        <a href="#" class="button">Read More</a>
      </p>
    </div>
  </section>
</header>

Or Instead of giving opacity to hidden-box give opacity to first p child.

Why can't I target this HTML element without parent opacity overtaking?

2 Answers2