Opacity in modal

HTML & CSS
1

By click a modal opens, set with an opacity of 0.8. Within this opened modal an image is displayed, I don’t want this image to inherit the opacity from the parent (modal). The image opacity should be set to 1.0.
But the opacity stays at 0.8. I tried:
setting the opacity value of the image id whitin the modal to 1.0 adding !important. I also tried a keyframe animation with a changing opacity. Without success.

This is the modals code

.modal {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  grid-gap: 15px;
  width: 708px;
  height: 920px;
  background-color: #2c40f5;
  color: #fff;
  opacity: 0.8;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  position: absolute;
  overflow: scroll;
  border-radius: 20px;
}

The image with the id of #objectImg is added dynamically with JS. The CSS is:

#objectImg {
  grid-column: 2/5;
  grid-row: 2/10;
  width: 100%;
  opacity: 1;
  cursor: pointer;
  /* transition: opacity 1s, width 2s; */
}

The css for the hover state is:

#objectImg:hover {
  width: 200%;
  border: 5px solid red;
  border-radius: 20px;
  opacity: 1 !important;
  z-index: 2;
  background: #0000;
  /* animation-name: test 3s infinite; */
}

How can I change the opacity of an child element to 1.0 which is dynamically added through JS, when the parent element has an opacity below 1.0 ?

2

You can’t.

Opacity is atomic. Meaning that any children are all rendered with opacity. There is no way to raise the opacity level of a child element above that of its parent unless you remove that child from its current stacking context and perhaps absolutely place it into position. That is not usually a good option.

Assuming you only wanted the background colour of your modal to be partially opaque then you should use rgba background color properties to make just the background colour partially transparent.

e.g.

.modal {background-color:rgba(44, 64, 245, 0.8)}

The 0.8 is the transparency level with 0 fully transparent and 1 opaque.

2 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.