0

I am trying to get my container overlay to be at an opacity of 0.7, but to keep my child text to retain an opacity of 1.0. If I try directly setting the opacity in the child element, nothing changes. How would I change the text to have an opacity of 1.0, while keeping the overlay at 0.7?

CSS:

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #2a7de1;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  opacity: 0.7;
}
.text {
  color: white;
  font-size: 1.7vw;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'karla';
}

HTML SAMPLE:

   <div class="contained1"> 
  <img class="resize" src="https://i.imgur.com/D2hr3Ma.jpg"> 
    <div class="overlay">
    <div class="text">Blog Illustrations</div>
  </div>
</div>

CODEPEN: https://codepen.io/daniel-albano/pen/vYOKRzp?editors=1100

Daniel Albano
  • 21
  • 6
  • not sure if it works but have i tried to play with the z-index? – The Fool Feb 18 '20 at 20:46
  • Might be easier to have a child `
    ` (sibling to `.text`) with the desired opacity and background color, that just expands to fill the parent.
     – Green Cloak Guy Feb 18 '20 at 20:48
  • Sorry, but could you give me an example of how to do this? I'm a bit new to coding still :/ Would I need to create another div tag inside of overlay and give it the same background color, but a full 1.0 opacity? – Daniel Albano Feb 18 '20 at 20:59

0 Answers0