How to make dark overlay for 4 divs using bootstrap - html

Question

I have 4 divs with image as background and I want them all to have a dark overlay, but the absolute position is somehow messing things up because all 4 overlays end up over the first div when I want each to include all 4 divs.
Thanks in advance!

Answer 1

You should set the .overlay as a child of the .factorImg div and make .factorImg have position: relative, otherwise the .overlay will be set absolute to .row.
You could also look into pseudo-classe (:before and :after):
https://www.w3schools.com/css/css_pseudo_classes.asp

Answer 2

Put <div class="overlay1"></div> tag inside factorImg1 div and give it to position:relative. Do same thing in all respective div.

Answer 3

Put your overlay divs inside bootstrap columns which will have display: relative by default. Check below snippet for reference.
.overlay1,
.overlay2,
.overlay3,
.overlay4 {
width: 14.7%;
height: 270px;
background-color: #000000;
opacity: 0.5;
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.factorImgText {
position: absolute;
z-index: 1;
padding: 0 5px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
text-align: center;
width: 90%;
}
.factorSection h6,
.factorSection p {
color: #fff;
font-weight: 900;
}
.factorSection h6 {
font-size: 1em;
text-align: center;
width: 90%;
}
.factorSection p {
font-size: .75em;
line-height: 1.4em;
margin-bottom: 0;
}
.factorImg1,
.factorImg2,
.factorImg3,
.factorImg4 {
background: rgba(0, 0, 0, 0.6);
opacity: 1;
height: auto;
padding-top: 8%;
padding-bottom: 8%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 270px;
width: 23.8%;
position: relative;
}
.factorImg1 {
background-image: url('http://kleingartenverein-aligse.de//images/wallpaper/Oct/fall-1072821_1920.jpg');
margin-right: 10px;
}
.factorImg2 {
background-image: url('http://kleingartenverein-aligse.de//images/wallpaper/Oct/fall-1072821_1920.jpg');
margin-right: 10px;
}
.factorImg3 {
background-image: url("http://kleingartenverein-aligse.de//images/wallpaper/Oct/fall-1072821_1920.jpg");
margin-right: 10px;
}
.factorImg4 {
background-image: url("http://kleingartenverein-aligse.de//images/wallpaper/Oct/fall-1072821_1920.jpg");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="background_section2">
<div id="section2-05" class="container">
<div class="row">
<div class="col-lg-12 col-sm-12">
<h2>¿QUÉ ES EL FACTOR ZURPRAIS?</h2>
<p>¡Mucho más que el factor sorpresa!</p>
</div>
</div>
<div class="row factorSection">
<div class="col-sm-3 col-xs-12 factorImg1">
<div class="factorImgText">
<h6>2 DÍAS ANTES… ¡ZURPRAIS!</h6>
<p>Con tu pack de experiencias, tu edad y tu perfil (familias, parejas, amig#s…), organizaremos tu plan… Y como es Zurprais, 2 días antes sabrás lo que es.</p>
</div>
<div class="overlay1"></div>
</div>
<div class="col-sm-3 col-xs-12 factorImg2">
<div class="factorImgText">
<h6>PLANES CON UN PLUS</h6>
<p>Un atardecer en velero… ¿con cava y ostras? Un brunch… ¿entre viñedos? Todas tus experiencias tendrán un toque extra que las hará aún más especiales.</p>
</div>
<div class="overlay2"></div>
</div>
<div class="col-sm-3 col-xs-12 factorImg3">
<div class="factorImgText">
<h6>EMOCIÓN DESDE LA RESERVA</h6>
<p>Al reservar, empieza el juego. Recibirás algunas pistas sobre las actividades que te podrían tocar. Para que vayas calentando motores.</p>
</div>
<div class="overlay3"></div>
</div>
<div class="col-sm-3 col-xs-12 factorImg4">
<div class="factorImgText">
<h6>CAMBIO GRATUITO</h6>
<p>¡Segurísimo que tu plan te va a encantar! Pero para que estés tranquil#: si no te gusta lo que te hemos organizado, te preparamos uno diferente para otro día.</p>
</div>
<div class="overlay4"></div>
</div>
</div>
</div>
</div>