allow a title to be in the foreground while still having a before overlay for the background

HTML

<h3>overlay with no relative</h3>
<div class='bgimg flex-center'>
  <div class='my-title'>the title overlay</div>
</div>

<h3>overlay with relative</h3>
<div class='bgimg flex-center'>
  <div class='my-title relative'>the title overlay</div>
</div>

CSS

.bgimg {
	height:300px;
  	width:100%;
  	background:url(https://kruxor.com/images/pexels-photo-709552.jpg) center no-repeat;
  	position:relative;
}
.bgimg::before {
  	content:" ";
	height:300px;
  	width:100%;
  	background:rgba(0,0,0,0.8);
  	position:absolute;
   	top:0px;
 	left:0px; 
}
.my-title {
  font-size:30px;
  font-weight:bold;
  color:#FFF;
}
.relative {
  position:relative;
}
.flex-center {
    display: flex;
	align-items: center;
	justify-content: center;
	transition: all 1s;
}