I am trying to create the following functionality:

Container with 4 cols – each col-3 with an text element. If I hover on any of the , I need the #services div to change the background. The idea is that when a certain is :hover, the background becomes colored for that part of the image, but the image spans over the entire div.

HTML:

    <div class="container-fluid  m-0 d-flex flex-row">

        <div class="col-md-3 pr-0 pl-0   text-center services-readmore">

            <div class="link divtoggle" onclick="toggleService(1)">
                <h6>Read More</h6>
            </div>
        </div>


        <div class="col-md-3 pr-0 pl-0   text-center services-readmore">

            <div class="link divtoggle" onclick="toggleService(2)">
                <h6>Read More</h6>
            </div>
        </div>

        <div class="col-md-3 pr-0 pl-0   text-center services-readmore">

            <div class="link divtoggle" onclick="toggleService(3)">
                <h6>Read More</h6>
            </div>
        </div>

        <div class="col-md-3 pr-0 pl-0   text-center services-readmore">

            <div class="link divtoggle" onclick="toggleService(4)">
                <h6>Read More</h6>
            </div>
        </div>
    </div>
</div>

CSS:

.slanted5 {
  background-image: url("https://audmax.local/wp-content/uploads/2022/05/servicesbg.png");
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}

I tried tackling this with pointer-events like stated here, but the issue with this approach is that the are supposed to open a popup, and it does not work in this case. Also, I am not able to change the background 4 times (different for each h6)

Thanks!