0

Can I show a low color on a div so that the image would be clearer like on the first image?

I covered the image with a div that has opacity so that div will be shown while the image is showing.

Please tell me if there is a way without using opacity.

This is what I want as result:

enter image description here

How can I define the opacity to not affect the children elements? Here is what I want it to be:

I tried color: rgb(255, 255, 255); but it shows me the same result.

Here is what it is right now, it does not change the opacity on children.

enter image description here

my CSS

.image-cover{ 
  background:#858C94;
  opacity:0.7;
  width: 60px;
  height: 60px;
  margin-top: -66.8px;
  position: relative;
}
.mediv{
  color: rgb(255, 255, 255);
}

my HTML

<div class='row image-cover'>
  <div className='mediv'>2</div>
  <div className='mediv' >bk52</div>
</div>
Zsolt Meszaros
  • 21,961
  • 19
  • 54
  • 57
joseph smith
  • 143
  • 1
  • 10

1 Answers1

1

You can use the Alpha while declaring Background property of parent as

background:rgba(133,140,148,0.5)

instead of opacity. so child elements will not be affected.
Tushar Maheshwari
  • 68
  • 1
  • 8