Develop Reference

What is wrong with my mix-blend-mode code snippet?

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

.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

Masking visibility of text within a div with overflow:hidden and GreenSock

I am trying to slide a div over another div with text inside, however I don't want the text to move with the div, I just want the div to slide over the text (and mask/hide it) while the text stays where it is.
I'm still a newbie so my apologies in advance if this doesn't make sense :D Here is a reference that is super similar to what I'm trying to achieve, however instead of the text falling, I just want the div to slide over the text (and hide it) without the text moving at all:
ref
Here's their code:
html:
<div>
<h2>test,</h2>
<h2>test,</h2>
<h2>test.</h2>
</div>
css:
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
width: 100px;
height: 100px;
background: #efefef;
/* Overflow HERE .. not on the
elements being tweened */
overflow: hidden;
h2{
position: relative;
color: black;
font-weight: bold;
height: 33.3%;
margin: 2px 4px;
}
}
js:
let preloaderAnim = new TimelineMax();
preloaderAnim.staggerTo('h2', 1, { y:'200%', delay: 1}, .15);
I've heard that overflow:hidden might be useful, but I'm not sure how to use it in this case...
I would also like to use GreenSock for the animation!
Thanks in advance :)

Cover whole html page in grey to indicate temporary disablement

For my html page I would like to be able to shade the whole page to indicate temporary disablement of all items in the page, the way it is when (for example) when one opens the "Insert Image" dialog box in the "Ask question" section here (as shown in the snapshot below).
The only thing I can think of is setting the page’s bgcolor attribute to grey, but that's not quite what I want because the shading should appear on top of the page items, not behind them. What is the correct way to do it ?

Apply a disabled class to your body and define this style
body.disabled:before {
content: "";
position: fixed;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: ... /* choose a z-index so that no other element can overlap it */
background: rgba(0,0,0, .8);
}
Example
body.disabled:before {
content: "";
position: fixed;
z-index: 1;
min-height: 100vh;
width: 100%;
left: 0;
top: 0;
background: rgba(0,0,0, .5);
}
.popup {
position: fixed;
z-index: 2;
background: #fff;
border: 2px #ccc solid;
padding: 30px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<body class="disabled">
I'm the body
<div class="popup">I'm the popup</div>
</body>
If you use a pseudolement you won't need to use empty markup only for styling purpose.
When the user interaction has completed, just remove the disabled class (via js)

You could add a div over the rest of your page
<div id="overlay"></div>
#overlay{
position:fixed;
z-index:10;
top:0;
left:0;
bottom:0;
right:0;
background-color:[what ever you want]
}
N.b. however I prefer the :before option (assuming you don't need legacy IE support)

DIV-Elemt absolute(!) positioning

First for all: No, I'm not looking for the property position: absolute;
What I want to is to create a field that displays some text. I want to display that field exactly in the middle of the page and then fade out the background, doesnt matter, where the div is placed in the code.
At the moment it looks like that:
https://www.dropbox.com/s/wiljdh1xjj3we1c/Capture1.PNG
https://www.dropbox.com/s/chw7pdes5fdcj3u/Capture2.PNG
How can I place an Elemtn ABSOLUTE in the middle of the page, doesnt matter where it is written in the code?
Now I could just say well, I will place it on top of the content. But the problem is, in this field is displayed some information that generates in the content, so I have to put it in the code after the content.
I hope, someone can help me :)
PS: If you have another solution to solve something like this... feel welcome to tell me! I just want something like an alert();-Box with my own style.
EDIT: Some effort: (basically already shown with the screenshots, but here some code; just didnt want to make it confusing)
I save the text as following:
// Save Help-Text
ob_start();
?>
This is the main page. There is no help available!
<?php
$help = ob_get_clean();
I display the text as following: (echo create_help($help); creates the help-tag and displays it)
function create_help($content){
$help = "
<div id=\"help-bg\" class=\"closehelp\" ></div>
<div id=\"help\" >
<img src=\"../images/close.png\" class=\"closehelp\" />
$content
</div>
";
return $help;
}
This is the CSS for the box:
/* Help-box style */
#help
display: none;
position: absolute;
margin-left: auto;
margin-right: auto;
background-color: #B8DBFF;
border: 5px solid rgb(58, 100, 250);
border-top: 30px solid rgb(58, 100, 250);
border-radius: 5px;
padding: 20px;
width: 600px;
z-index: 1001;
#help img
position: absolute;
margin-left: 595px;
margin-top: -47px;
height: 25px;
width: 25px;
/* Makes background of Help-box transparent black */
#help-bg
background-color: black;
z-index: 1000;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
opacity:0.6;
display: none;

First of all I would recommend using position:fixed; instead of position:absolute; because the alert would scroll within the page. If you have a fixed height and width try something like
margin: -150px 0 0 -150px;
left: 50%;
top: 50%;. This CSS-Code will center your div horizontally and vertically (Demo -> http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html). But if you are using an dynamic height maybe you should consider using jQuery or give it a fixed top position.

try this:
html, body{
position: relative;
}
.yourAbsoluteClass{
position: absolute;
width: 50%;
top: 25%;
left: 50%;
}

How to display pop up text on mouse hover?

I want to load some content from a DIV tag as pop up text when i hover over an image. When i mouse leave from that image pop should disappear and when i again mouse over image content should show as pop up text. I am using HTML, Jquery, JS for this. It will be very useful if i get a solution using jquery load() method. Let me know ur response.

Or, without javascript:
<div class="tooltip-wrap">
<img src="/some/image/file.jpg" alt="Some Image" />
<div class="tooltip-content">
Here is some content for the tooltip
</div>
</div>
And this CSS:
.tooltip-wrap {
position: relative;
}
.tooltip-wrap .tooltip-content {
display: none;
position: absolute;
bottom: 5%;
left: 5%;
right: 5%;
background-color: #fff;
padding: .5em;
min-width: 10rem;
}
.tooltip-wrap:hover .tooltip-content {
display: block;
}

You could also try something very simple like:
<acronym title="pop-up text"><img src=...></acronym>

You can use Twitter Bootstrap with the tooltip plugin.
If you want just the plugin, you can build your own Bootstrap with the plugin only.
Finally if you want to stylize your tooltip, use CSStooltip.com.
Example :
span.tooltip:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent #FFFFFF transparent transparent;
top: 11px;
left: -24px;
}

You can add the title attribute to the image. You don't need any extra tags or styling, just an attribute.

<p id="icon">Text to hover over</p>
<p id="info" style="display: none">Text to popup</p>
Then, finish it with javascript.
<script>
var e = document.getElementById('icon');
e.onmouseover = function() {
document.getElementById('info').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('info').style.display = 'none';
}
</script>
If you hover over the text, another will popup.