Background-color with opacity on parent div but not on child div

Question

I have a question about overlays and opacity and z-index.

I have a row of boxes that contain a background image and a centered h2. On hover, I'd like the background image to get a lower opacity, say of .6.

The only issue is that no matter which way I try to apply the opacity to the background image, it seems to affect the text, which isn't what I want. I only want the image to get lighter, not the text.

Is there a way to achieve this with just CSS, short of replacing the image with a lighter version of the image on hover?

Here's a JS Fiddle demonstrating what I'm dealing with: https://jsfiddle.net/syrbqsv4/

HTML:

.promo-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap:wrap;
}

.overlay {
    height: 250px;
}

.outer-promo {
    margin-bottom: 25px;
    width: 250px;
    height: 250px;
}

.outer-promo, .description-container {
    border: 1px solid #9A8478;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.25);
}

.outer-promo {
    height: 250px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    background-image:url(https://images.pexels.com/photos/313093/pexels-photo-313093.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
    background-position:center center;
    position:relative;
}

.inner-promo {
    height: 85%;
    width: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #9A8478;
}

.overlay:hover {
  background-color:black;
  position:relative;
  cursor:pointer;
  opacity:.4;
}

<div class="promo-container">
  
  <div class="overlay">
    <div class="outer-promo events-catering-spaces">
      <div class="inner-promo">
        <h3><a href="/events-and-catering/space/">SPACES</a></h3>
      </div>
    </div>
  </div>
   
  <div class="overlay">
    <div class="outer-promo events-catering-occasions">
      <div class="inner-promo">
        <h3><a href="/events-and-catering/occasions/">OCCASIONS</a></h3>
      </div>
    </div>
  </div>

  <div class="overlay">
    <div class="outer-promo events-catering-menu">
      <div class="inner-promo">
        <h3><a href="/menu/">MENU</a></h3>
      </div>
    </div>
  </div>

  <div class="overlay">
    <div class="outer-promo events-catering-vendors">
      <div class="inner-promo">
        <h3><a href="/events-and-catering/vendors/">VENDORS</a></h3>
      </div>
    </div>
  </div>

</div>

I thinks its a problem with your hierarchic. Try to create a div only for the background as example and then put the text you want above this div tag. Then you can make the hover effect only on the background div. If z-index not working then something is wrong in your hierarchic. Also notice that z-index works only with position: * as example relative. — t33n, Aug 08 '17 at 00:40
Hmmm, read through those just now but I don't think they directly address this issue. I can't get rbga values to work at all over the background image :/ — Qotsa42, Aug 08 '17 at 00:46
Thanks so much, t33n!!! The solution was moving the class="overlay" div inside the background-image div, instead of being outside, like I had it. I had to tweak a bit of the CSS to make it work, but I've got it now. Here's a fiddle in case anyone has a future reference. https://jsfiddle.net/56gjpfLp/ — Qotsa42, Aug 08 '17 at 00:54

Background-color with opacity on parent div but not on child div

0 Answers0