Glow on image except a certain div

Question

So I have an orange glow on my image which I would like everywhere except inside the bottom div which contains a title.

Shortened version of how it's build up

<div class="navbar-header"> <!-- Has a background image in css which is the base image -->
    <div class="glow-orange"> <!-- Has a background color: rgba(247, 147, 29, 0.4) -->
        <div class="title"> <!-- Is being positioned bottom in the middle -->
            Title
        </div>
    </div>
</div>

Here's a really simple image for the visualization of this setup. Blue would be my image with the glow. They grey bar is transparent. I want the part of th image behind the grey bar to be the original color of the image instead of the orange glow.

Thanks in advance.

P.S. I'm using the bootstrap framework incase that might have some features that makes this easier / doable.

@Scott Am I missing something important? This is just a small part of my complete website. No offense, because I'd post some css, but my css is quite a mess and I did already explain the way I setup the glow and the image which are the important parts right? — Gerrit Iest, Aug 31 '16 at 09:14
@GerritIest how can anyone troubleshoot CSS issues without seeing the relevant CSS? — Scott, Aug 31 '16 at 09:19
@GerritIest, you need to make an [MCVE] so that we can see your issue and try to fix it. With what you have provided we are unable to help you and any solution would be a guess — Pete, Aug 31 '16 at 09:28
@Pete I get that, but I'm just explaining my setup. It's not necessarily a problem I've in my setup. It's something that I just can't figure out how to do. — Gerrit Iest, Aug 31 '16 at 09:42
From what I gather, basically you want a hole in your div parent where the title is. This currently isn't possible unless you use a not very well supported css3 clipping mask or make an svg overlay http://stackoverflow.com/questions/20205503/cutting-a-hole-in-a-parent-element-with-css — Pete, Aug 31 '16 at 09:46

score 1 · Accepted Answer · answered Aug 31 '16 at 09:19

One option to do this is to use large box-shadow on title and overflow: hidden on parent element.

.navbar-header {
  width: 250px;
  height: 150px;
  background: url('http://www.lenntech.com/images/Home/Waterdrop775.png');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.glow-orange {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}
.title {
  width: 150px;
  text-align: center;
  height: 50px;
  box-shadow: 0px 0px 0px 150px rgba(247, 147, 29, 0.4);
}

<div class="navbar-header">
  <div class="glow-orange">
    <div class="title">Title</div>
  </div>
</div>

Thank you for exactly understanding what I wanted and delivering that! — Gerrit Iest, Aug 31 '16 at 10:10

Glow on image except a certain div

1 Answers1