I've been attempting to add a dark overlay to an image or video on my bootstrap 5 website, but every time I do so, it ends up covering the text as well. Here is my current code:
.drk:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: black;
opacity: 0.6;
}<div id="home" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item drk active">
<video class="d-block img-fluid w-100" preload muted autoplay loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<div class="carousel-caption d-none d-md-block">
<h1>Push your boundaries. Expand your brand.</h1>
<h3>You don’t have to own a business or logo to have a brand. Who are you and what do you do? What are you passionate about? What talents do you have? What is <i>your</i> brand?</h3>
<h3>At Free Solo Studios we are just as passionate about you and your brand as we are of our own, and we don’t succeed until you do.</h3>
</div>
</div>
</div>
</div>I've tried following tutorials on YouTube, but I seem to be missing something. Any assistance would be greatly appreciated!
Result:
Desired outcome: