I am currently working with the latest version of bootstrap and I am facing some challenges with the CSS due to my lack of familiarity with it (I have very little experience with bootstrap).
My goal is to add a black filter to my images (specifically those on the right in the "Qui suis-je" section), similar to what I have successfully done with my slider. However, there seems to be a shift in the layout, possibly due to the col classes. I want to maintain the same padding, so setting "padding: 0" for the parent element (class sec-1-2) makes it too large.
Could someone provide assistance with this issue?
You can view my website (which is still under construction) here: blog.amelie-mathieu.fr, and see a screenshot of the problem. You can also inspect the code using browser console, but I have included the relevant code snippet below.
Thank you for your help!
.sect-1-2 {
height: 100%;
}
.sect-1-2 img {
position: relative;
z-index: 1;
}
.play img {
width: 80px;
position: absolute;
z-index: 5;
display: inline-block;
margin-top: 15%;
}
.play {
text-align: center;
}<div class="sect-1-2 col-lg-6 col-md-12">
<div class="transparent-bg2"></div>
<div class="play"><img src="images/play.png"/></div>
<div><img src="images/Thumbnail-CV-vidéo-Janvier-2018.png" class="img-fluid"/></div>
</div>