I have a small page with a blurred background image. On top of that, I have divs set up as cards that have their transparent overlay on a background image. I'm trying to set up a text effect using blending modes without taking into account the overlay.
The text effect I want to replicate is at this codepen: https://codepen.io/thebabydino/pen/JNWqLL
Specifically, I want to replicate the example on the left, where the drop shadow is inverted along with the text, and the text is the invert of the image underneath.
In my attempts to do so, I have been unable to get the blend mode effect to ignore the opaque layer and only focus on the image.
The point of the opaque layer is to help the text stand out more, but it seems to be having the opposite effect as it influences the blending, making everything darker.
The text is only orange because it is being constantly inverted due to the darker opaque layer and ignoring the image underneath completely.
This is my attempt so far:
html,
body {
min-height: 100vh;
display: flex;
flex-direction: column;
webkit-font-smoothing: antialiased;
moz-osx-font-smoothing: grayscale;
font-family: 'Squada One', sans-serif !important;
}
body::before {
content: '';
background-image: url("https://images.unsplash.com/photo-1641119554941-1c286b163e1c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
position: fixed;
z-index: -1;
filter: blur(2.5px);
width: 100vw;
height: 100vh;
transform: scale(1.1);
}
.parenttile {
margin: 0 auto;
text-align: center;
display: flex;
align-items: center!important;
}
.link_wrapper2 {
width: auto;
padding: 0px;
}
.boxborder {
border-color: blue;
border-width: 0.3em;
border-style: solid;
border-radius: 15px !important;
}
.front {
position: relative;
z-index: 2 !important;
}
.blend {
text-shadow: 0 2px 2px #fdee00;
-webkit-filter: invert(100%);
filter: invert(100%);
mix-blend-mode: lighten;
}
.test-box:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.20);
z-index: 1;
}
.test-box {
background-image: url("https://images.unsplash.com/photo-1641225635705-139a1a5e3938?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=261&q=80");
background-size: cover;
background-repeat: no-repeat;
height: 150px;
border-radius: 15px !important;
position: relative;
}
header.blending h2 {
color: white;
text-shadow: 0 3px 1px orange;
mix-blend-mode: difference;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Box Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css" integrity="sha512-IgmDkwzs96t4SrChW29No3NXBIBv8baW490zk5aXvhCD8vuZM3yUSkbyTBcXohkySecyzIrUwiF/qV0cuPcL3Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="columns is-centered desktop front">
<div class="column is-9">
<div class="tile is-ancestor parenttile ml-3 mr-3">
<div class="tile is-4 is-parent">
<div class="tile is-child box test-box boxborder has-text-white has-text-centered" style="overflow:hidden;">
<a href="#">
<div class="link_wrapper2 is-align-items-center is-flex blend front">
<header class="blending">Contrasting Text Example</header>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>How can I use a mixed-blend-mode effect to invert the image underneath while ignoring the overlay I have between the text and the image? If this specific approach is not possible, what is an alternative method that could achieve the same result?