Is it possible to have a semi-transparent foreground color over an image?

Question

I have several images in a div and I'm trying to have an effect on the images. Basically, I'm simply trying to have a foreground color over the image with an opacity of about 0.7 such that I can still see the image and have that effect.

Now, I looked around S.O and I found some pretty good solution such as this one for example but it's not the same approach as what I am trying to achieve.

Here's my HTML

<div class="col colMg">
    <div class="prodImg">
        <img src="images/model1.jpg" alt="" title="" />
        <div class="layer"></div>
    </div>

    <div class="prodImg">
        <img src="images/model2.jpg" alt="" title="" />
    </div>
</div>

Notice the layer class in my HTML snippet. For some reason it doesn't work properly with the CSS I put below. From the code presented here, the layer covers my WHOLE page including the image in its parent div. That's now what I want. I want it to cover only the image in its parent div`.

Here's my CSS

#prodIntro{
    margin-top: 10px;
    width: 50%;
    background-color: red;
    display: block;
    display:visible;
}

.col{
    width: 33%;
    float: left;
}

.colMg{
    margin-right: 0.5%;
}

.prodImg{
    width: 100%;
}

.prodImg img{
    width: 100%;
}
.layer{
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    #prodIntro{
        margin-top: 10px;
        width: 50%;
        background-color: red;
        display: block;
        display:visible;
    }
    
    .col{
        width: 33%;
        float: left;
    }
    
    .colMg{
        margin-right: 0.5%;
    }
    
    .prodImg{
        width: 100%;
    }
    
    .prodImg img{
        width: 100%;
    }
    .layer{
        background-color: rgba(248, 247, 216, 0.7);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    <div class="col colMg">
        <div class="prodImg">
            <img src="images/model1.jpg" alt="" title="" />
            <div class="layer"></div>
        </div>
    
        <div class="prodImg">
            <img src="images/model2.jpg" alt="" title="" />
        </div>
    </div>

Any help is appreciated. Thanks

David Thomas · Accepted Answer · 2015-12-09T14:38:59.070

You need to apply a non-static position (position: static is the default position for most, if not all, HTML elements) to the ancestor in relation to which you want to position the .layer instead of the document as a whole, therefore:

.prodImg{
    position: relative;
    width: 100%;
}

#prodIntro {
  margin-top: 10px;
  width: 50%;
  background-color: red;
  display: block;
  display: visible;
}
.col {
  width: 33%;
  float: left;
}
.colMg {
  margin-right: 0.5%;
}
.prodImg {
  position: relative;
  width: 100%;
}
.prodImg img {
  width: 100%;
}
.layer {
  background-color: rgba(248, 247, 216, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="col colMg">
  <div class="prodImg">
    <img src="images/model1.jpg" alt="" title="" />
    <div class="layer"></div>
  </div>

  <div class="prodImg">
    <img src="images/model2.jpg" alt="" title="" />
  </div>
</div>

Yeah, it's strangely simple once you already know the answer. Still, I'm glad to have helped! :) — David Thomas, Dec 09 '15 at 14:40
Indeed. I did apply a `position:relative` to a div, but it was the wrong one `prodIntro`. Thanks. :) — nTuply, Dec 09 '15 at 14:45

Is it possible to have a semi-transparent foreground color over an image?

1 Answers1