0

I have a question that I have taken a column/box in HTML which includes certain images and text and when I try to reduce the opacity of that column it reduces the opacity of the images as well that are inside it. I have given different class to the column and images, but this is not working for me and it is reducing the opacity of all the contents in it. Please let me know that what should be done to solve it?

phoney_badger
  • 462
  • 3
  • 10
The Jordan Unleashed
  • 11
  • 1
  • 2
    Please post some code for what you have tried and what is not working. Please see [How to create a Minimal, Reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) – phoney_badger Mar 25 '22 at 18:23
  • Please provide enough code so others can better understand or reproduce the problem. – Community Mar 29 '22 at 06:11

1 Answers1

0

you can use

background-color: rgba(r,g,b,alpha[0,1])

or

background-color:hsla(hue, saturation, lightness, alpha[0,1])

instead of using opacity in .container

https://www.w3schools.com/csSref/func_rgba.asp

https://www.w3schools.com/cssref/func_hsla.asp

img {
  max-width: 100%;
  display: block;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}


.container {
  height: 100vh;
  background-color: rgba(0, 0, 255, 1);

  /* opacity: 0.1; */
}

.container:hover {
  background-color: rgba(0, 0, 255, 0.5);
}
<div class="container">
      <img src="https://source.unsplash.com/random/300x300?apple" alt="" />
    </div>
UPinar
  • 1,067
  • 1
  • 2
  • 16