<div class="container">
<div class="row ">
<div class="col-12 col-sm-6 col-xl-7">
<div class="bg-v-cover-block bg-v-cover-block--left"></div>
<div class="content-block"> text text txt</div>
</div>
<div class="col-12 col-sm-6 col-xl-5">
<div class="bg-v-cover-block bg-v-cover-block--right"></div>
<div class="content-block"> text text txt</div>
</div>
</div>
</div>
.bg-v-cover-block {
position: absolute;
top: 0;
height: 100%;
z-index:0
}
.bg-v-cover-block--left {
right: 0;
width: ???? vw
}
.bg-v-cover-block--right {
left: 0;
width: ???? vw
}
<div class="container">
<div class="row ">
<div class="col-12 col-sm-6 col-xl-7">
<div class="bg-v-cover-block bg-v-cover-block--left"></div>
<div class="content-block"> text text txt</div>
</div>
<div class="col-12 col-sm-6 col-xl-5">
<div class="bg-v-cover-block bg-v-cover-block--right"></div>
<div class="content-block"> text text txt</div>
</div>
</div>
</div>
.bg-v-cover-block {
position: absolute;
top: 0;
height: 100%;
z-index:0
}
.bg-v-cover-block--left {
right: 0;
width: ???? vw
}
.bg-v-cover-block--right {
left: 0;
width: ???? vw
}
обратите внимание на левую часть там приведет пример наведения, для использования ховера все элементы которые задействованы ховером должны быть в одном родителе...