css – Change BG image of container based on hover of child element dynamically
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!
Leave an answer