My goal is to add a foreground color with opacity over some images within a div, allowing the image to still be visible. I've come across solutions on S.O., like this one, but they don't quite achieve what I'm looking for.
Below is my HTML structure:
<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>
I have a CSS snippet as well that includes a layer class, which seems to cover more than just the intended image. It's positioned absolutely and set to cover 100% of its parent container which isn't what I want.
Here's my CSS:
#prodIntro{
margin-top: 10px;
width: 50%;
background-color: red;
display: block;
}
.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%;
}
Any guidance or suggestions would be greatly appreciated. Thank you