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
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.
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?
It’s probably easier if you got correct HTML formatting. The h2 should only surround “About”, not the whole paragraph.
Because CSS does not allow selecting text nodes, there is no solution given your markup that would work with
Hey checkout out this, this resembles not exactly but somehow and try to apply this in your own way :
