Bueno no vi la necesidad de utilizar el after o before , Prueba este código:
#image {
background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
height: 500px;
max-width: 100%;
position:relative;
}
#container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background:rgba(0,0,0,0.6);
}
.detalle {
color:#fff;
}
<div id="image">
<div id="container">
<div class="detalle">
<h2>TITLE TITLE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt neque harum a, cum natus fugit quidem, odio ea. Error ad a placeat omnis tempora nisi rerum, minima earum, sed dolor?</p>
</div>
</div>
</div>
Para el segundo ejemplo seria:
#container {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#image {
background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
height: 500px;
max-width: 100%;
filter:brightness(0.4);
}
.detalle {
position: absolute;
color:#fff;
top: 0;
}
<div id="container">
<div id="image">
</div>
<div class="detalle">
<h2>TITLE TITLE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt neque harum a, cum natus fugit quidem, odio ea. Error ad a placeat omnis tempora nisi rerum, minima earum, sed dolor?</p>
</div>
</div>