I'm eager to experiment with the CSS blend mode property, but I'm running into an issue where nothing seems to change when I apply the rules.
Could there be something wrong in my implementation? I've set the isolation rule for the parent and used mix-blend-mode on the specific element I want to manipulate.
Below is the code snippet along with a link to a helpful CodePen example.
.day-old {
position: relative;
isolation: isolate;
}
.day-old:before {
position: absolute;
top: 0;
left: 0;
display: block;
width: 99.9%;
height: 38px;
content: "";
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
.day-old .day-row {
opacity: 0.5;
}
.day-row {
display: -ms-flexbox;
display: flex;
width: 100%;
}
.day {
background: #f5f5f5;
margin: 0;
}
.day span {
display: block;
padding: 10px;
}
.availability {
display: flex;
width: 100%;
text-align: center;
margin: 0;
}
.slot {
display: block;
padding: 10px 0;
color: #3c763d;
background: #dff0d8;
width: 100%;
box-shadow: -1px 0px 0px #c7d9b9 inset, 0px -1px 0px #c7d9b9 inset;
mix-blend-mode: screen;
}<div class="day-old">
<div class="day-row">
<p class="inner day"><span><strong>13/04</strong></span></p>
<p class="availability">
<span class="slot">
<strong>2500</strong> </span>
</p>
</div>
</div>
Thank you!