Preciso colocar uma coluna col-lg-7
do bootstrap 4
por cima de outra coluna col-lg-6
eu estou usando um container-fluid
na div pai mas não faço ideia de como chegar no resultado da imagem mostrada abaixo:
Segue meu código percebam que ela fica uma do lado da outra mas preciso sobrepor a coluna com cor verde para ficar em ciam da da outra coluna e pegando 100% da tela:
<section class="video" id="video">
<div class="container-fluid">
<div class="row">
<div class="col-lg-7 video-popup">
<a href="#." class="thumbnail">
<div class="img">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 41.999 41.999" style="enable-background:new 0 0 41.999 41.999;" width="30px" xml:space="preserve">
<path d="M36.068,20.176l-29-20C6.761-0.035,6.363-0.057,6.035,0.114C5.706,0.287,5.5,0.627,5.5,0.999v40
c0,0.372,0.206,0.713,0.535,0.886c0.146,0.076,0.306,0.114,0.465,0.114c0.199,0,0.397-0.06,0.568-0.177l29-20
c0.271-0.187,0.432-0.494,0.432-0.823S36.338,20.363,36.068,20.176z"/>
</svg>
<img src="assets/images/bg-video.jpg" class="img-fluid"/>
</div>
</a>
</div>
<div class="col-lg-5">
<div class="box">
<h1>teste</h1>
</div>
</div>
</div>
</div>
</section>
SCSS:
section.video{
margin-top: 50px;
.video-popup{
padding: 0;
.thumbnail{
.img {
position: relative;
svg {
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
}
}
}
.box{
padding: 50px 0;
background-image: url(../images/gradient.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
}