changing opacity of certain items

Question

I have created a column/box in html and there are certain images in it. I want to reduce the opacity of the column and images to be displayed at full opacity. But when I reduce the opacity of the box, it reduces the opacity of images as well. How can this issue be solved.

<h2>
  About

  <p>Cardcaptor Sakura, abbreviated as CCS, is a Japanese manga series written and illustrated by the manga group Clamp. Serialized monthly in the shōjo manga magazine Nakayoshi from May 1996 to June 2000, it was also published in 12 tankōbon volumes by
    Kodansha between November 1996 and July 2000.</p>

  <img class="about-img" src="images/aboutgirl.png" alt="Home" />
</h2>

In this code it reduces the opacity of text and images as well. What can be done to display images at full opacity?

By changing the opacity of a container, you are actually changing its opacity and that of all content within it. In your case why can't you change the text color to something partially transparent? — Krokodil, Mar 26 '22 at 16:09
It's probably easier if you got correct HTML formatting. The h2 should only surround "About", not the whole paragraph. — Rickard Elimää, Mar 26 '22 at 16:20
Because CSS does not allow selecting text nodes, there is no solution given your markup that would work with `opacity`. — connexo, Mar 26 '22 at 16:21
Hey checkout out this, this resembles not exactly but somehow and try to apply this in your own way : https://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements — Jagroop, Mar 26 '22 at 16:33

connexo · Answer 1 · 2022-03-26T16:33:36.333

For a working solution, you will have to wrap any text nodes inside your container element, because CSS does not allow to select text nodes.

Also, your current HTML is invalid; p cannot be a child of h2.

Once that is done, this would work:

.container>*:not(img) {
  opacity: 0.2;
}

<div class="container">
  <h2>About</h2>

  <p>Cardcaptor Sakura, abbreviated as CCS, is a Japanese manga series written and illustrated by the manga group Clamp. Serialized monthly in the shōjo manga magazine Nakayoshi from May 1996 to June 2000, it was also published in 12 tankōbon volumes by
    Kodansha between November 1996 and July 2000.</p>

  <img class="about-img" src="https://lh3.googleusercontent.com/a-/AOh14GgAlyVXY6KD4la6VneAErUHAm3vvt1zmNw360VR98o=k-s64" alt="Home" />
</div>

This is basically the same answer to the same question as this: Apply blur effect to parent container only

score 0 · Answer 2 · answered Mar 26 '22 at 17:18

div{
  color: rgba(0,0,0,0.5);
}

<div>
<h2>About<p>Cardcaptor Sakura, abbreviated as CCS, is
                a Japanese manga series written and
                illustrated by the manga group Clamp.
                Serialized monthly in the shōjo manga
                magazine Nakayoshi from May 1996 to
                June 2000, it was also published in 12
                tankōbon volumes by Kodansha between
                November 1996 and July 2000.</p>
                <img class="about-img" src="images/aboutgirl.png" alt="Home" />

            </h2>
            </div>

Instead of using the opacity property, use color: rgba(). There are four arguments or values. The first are rgb values and the fourth is opacity.

changing opacity of certain items

2 Answers2