0

I’ve been trying emulate (in Webflow) this nifty 'fluid text hover' from the following codepen: https://codepen.io/robin-dela/pen/KKPYoBq

As you can see, there is a fair amount of HTML, CSS (SCSS) and JS (Babel), but I believe the pertinent code snippet to be the following:

<style>
body {
    position: fixed;
    height: 100%;
  overflow: hidden;
}

canvas {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}

.mask {
    position: absolute;
    z-index: 2;
    background: white;
    height: 100vh;
    width: 100vw;
    mix-blend-mode: screen;
    /* display: none; */
}

svg {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

I copied the HTML code into a code block embed on my page, the CSS into the inside head tag on page settings & the JS into the before body tag on page settings. When I publish my site, the 'CREATIVE' text displays, but without the interactive fluid element. I’m almost certain it’s something to do with the mix-blend-mode, as that is the only code showing up in red. I’ve seen similar questions asked on here, and have tried all the methods offered (changing the body background to white, as opposed to transparent; adding the code as a code block rather than the Inside tag, but nothing has as yet made it work. I’d really appreciate any help.

My Webflow site read-only can be found here: https://preview.webflow.com/preview/hen-ry?utm_medium=preview_link&utm_source=designer&utm_content=hen-ry&preview=f7f278a8af346d820c843647397c8d76&pageId=6238983c269c21e6d0507afe&workflow=preview

hencubed
  • 11
  • 2

1 Answers1

0
   .container {
      background-color: red;
    }

    .container img {
      mix-blend-mode: darken;
    }

this is how it works the container should have background-color to mix the background color in child image

Reference : https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Reference : https://www.w3schools.com/cssref/pr_mix-blend-mode.asp

Ronnel
  • 49
  • 1
  • 6
  • I've added this code into my CSS and also tried putting the html embed into a container, but it still doesn't work. Were you implying I needed to add the code snippet you sent? – hencubed Mar 22 '22 at 10:38
  • actually no because i don't know if that .mask class is parent or nah – Ronnel Mar 22 '22 at 15:00