Non-Transparent Text with html image and psuedo css classes - html

Question

I need to place NON-transparent text on an image. This image is defined in the html. (This is so it can be dynamic). I style the transparency with an :after pseudo element. I would like to have text on this image. apprecaited
However, the problem I'm running into is that the text inherits the transparency. All of the other solutions I have found either define the picture in CSS or don't use a picture at all. Any help would be appreciated, thanks!
EDIT: A colored transparency is desired.
<div class="col-md-6" id="red-square-parent">
<%= image_tag 'infos/home/teaching-3.jpg' %>
<div class="centered">Don't Apply Transparency to me!</div>
</div>
#red-square-parent img{
height: 100%;
width: 100%;
object-fit: none;
}
// Overlay
#red-square-parent:after{
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba($comp-color-red, 0.7);
}

Answer 1

So, the issue is that you're applying transparency to the parent element. Just target the image specifically for transparency:
JSFiddle
#red-square-parent img{
position: relative;
opacity: 0.5;
}
#red-square-parent div{
position: absolute;
bottom: 40px;
color: black;
font-size: 50px;
}
<div class="col-md-6" id="red-square-parent">
<img src="http://i.imgur.com/eTmzQ.jpg"/>
<div class="centered">Don't Apply Transparency to me!</div>
</div>
In order to apply a coloured filter over this image, you will not be applying background-color as this will not change the color of the image at all.
What you instead need to do it a bit complicated, but you must apply a filter to the image.
I would recommend using a tool such as this: CSS Generator - Filter to get the desired color effect you want.
When you have the desired filter, update your code to look something like this (using the code generated from the CSS Generator - Filter site. See my JSFiddle
#red-square-parent img{
position: relative;
opacity: 0.5;
/* Filter */
filter: grayscale(50%) opacity(1) brightness(100%) contrast(100%) hue-rotate(500deg);
-webkit-filter: grayscale(50%) opacity(1) brightness(100%) contrast(100%) hue-rotate(500deg);
}
#red-square-parent div{
position: absolute;
bottom: 40px;
color: black;
font-size: 50px;
}
<div class="col-md-6" id="red-square-parent">
<img src="http://i.imgur.com/eTmzQ.jpg"/>
<div class="centered">Don't Apply Transparency to me!</div>
</div>