Remove opacity on text [duplicate] - html

Question

This question already has answers here:
CSS background-image-opacity?
(13 answers)
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 2 years ago.
I have the following code and have added opacity to the solid overlay colour. The problem is that the text is also using the opacity. How do I change it so that the text does not have the opacity and sits on top?
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
opacity: .5;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="container">
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/07/the-essential-guide-to-using-images-legally-online-1520x800.png" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Thanks John

Answer 1

Instead of opacity, use a RGBA color scheme
RGB: #RRGGBBAA, while A is alpha. you can also use rgba(r,g,b,a)
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA99; /* Instead of #008CBA */
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="container">
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/07/the-essential-guide-to-using-images-legally-online-1520x800.png" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>

Answer 2

I have had this problem before and i used ::before,
I used it for images but i assume it also works for background colors
CSS i used;
.style::before{
background-image: url(/images/bg_button.png);
background-repeat: no-repeat;
opacity: 0.15;
width: 100%;
height: 100%;
content: "";
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}