I'm trying to get an effect similar to the one described here https://css-tricks.com/reverse-text-color-mix-blend-mode/. The problem is that one of my background elements is not parent of the text element I'm trying to change color, producing an undesired result and I can't figure out how to achieve the effect I want. The result I'm getting is the one shown in this image: Actual result
I want the text over the green tilted band to be white, while the text over the white area be green as it is. I have tried putting inside the green-band div but it gets clipped or distorted when I add the tilt effect to the band (with clip-path or skewX). The code used to get the result shown in the image is the following:
#green-band {
position: absolute;
width: 80%;
height: 100%;
background-color: #9DC42E;
transform: skewX(-45deg);
}
#green-band~h1 {
color: #623BD1;
mix-blend-mode: difference;
}
#green-band~h3 {
mix-blend-mode: difference;
}<div class="container">
<div class="row">
<div class="col-12 col-md-3 text-center d-flex flex-column justify-content-center">
<div id="green-band"></div>
<h1 class="">UBICACIÓN ESTRATÉGICA</h1>
<h3 class="text-gray mt-5 font-italic">A solo 10 minutos del centro Pereira</h3>
<h3 class="text-gray mt-5 font-italic">Cerca al aeropuerto</h3>
</div>
<div class="col-12 col-md-9">
<img src="images/cargando.gif" data-src="images/mapa.png" class="img-fluid lazy" />
</div>
</div>
</div>I have been trying to find a solution for some hours but nothing, so I hope you can help me. Thanks.