Overlay using mix-blend-mode
How do I make an overlay using mix-blend-mode?
Mock of a transparent fixed nav using mix-blend-mode in css. Nice solution taken from Sara Soueidan's blog. . What is a overlay using mix-blend-mode? How do you make a overlay using mix-blend-mode? This script and codes were developed by Chris Maki on 12 August 2022, Friday.
Overlay using mix-blend-mode Previews
Overlay using mix-blend-mode - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Overlay using mix-blend-mode</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav>
<span>link 1</span>
<span>link 2</span>
<span>link 3</span>
<span>link 4</span>
</nav>
<div class="over"></div>
<img src="https://images.unsplash.com/photo-1460626399219-57a00a2361cb?crop=entropy&fit=crop&fm=jpg&h=700&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925" alt="thanks unbounce" />
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consequuntur omnis assumenda, ipsam modi illo nostrum totam aperiam, ratione eos excepturi repudiandae. Fuga veniam, ipsa magnam harum odio maxime repellat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consequuntur omnis assumenda, ipsam modi illo nostrum totam aperiam, ratione eos excepturi repudiandae. Fuga veniam, ipsa magnam harum odio maxime repellat.</div>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus rerum cupiditate alias culpa eligendi eaque assumenda, aspernatur officia incidunt quaerat corporis atque modi excepturi maiores rem reiciendis cum voluptas. Aspernatur!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consequuntur omnis assumenda, ipsam modi illo nostrum totam aperiam, ratione eos excepturi repudiandae. Fuga veniam, ipsa magnam harum odio maxime repellat.</div>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consequuntur omnis assumenda, ipsam modi illo nostrum totam aperiam, ratione eos excepturi repudiandae. Fuga veniam, ipsa magnam harum odio maxime repellat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consequuntur omnis assumenda, ipsam modi illo nostrum totam aperiam, ratione eos excepturi repudiandae. Fuga veniam, ipsa magnam harum odio maxime repellat.</div>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus rerum cupiditate alias culpa eligendi eaque assumenda, aspernatur officia incidunt quaerat corporis atque modi excepturi maiores rem reiciendis cum voluptas. Aspernatur!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consequuntur omnis assumenda, ipsam modi illo nostrum totam aperiam, ratione eos excepturi repudiandae. Fuga veniam, ipsa magnam harum odio maxime repellat.</div>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consequuntur omnis assumenda, ipsam modi illo nostrum totam aperiam, ratione eos excepturi repudiandae. Fuga veniam, ipsa magnam harum odio maxime repellat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consequuntur omnis assumenda, ipsam modi illo nostrum totam aperiam, ratione eos excepturi repudiandae. Fuga veniam, ipsa magnam harum odio maxime repellat.</div>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus rerum cupiditate alias culpa eligendi eaque assumenda, aspernatur officia incidunt quaerat corporis atque modi excepturi maiores rem reiciendis cum voluptas. Aspernatur!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consequuntur omnis assumenda, ipsam modi illo nostrum totam aperiam, ratione eos excepturi repudiandae. Fuga veniam, ipsa magnam harum odio maxime repellat.</div>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consequuntur omnis assumenda, ipsam modi illo nostrum totam aperiam, ratione eos excepturi repudiandae. Fuga veniam, ipsa magnam harum odio maxime repellat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consequuntur omnis assumenda, ipsam modi illo nostrum totam aperiam, ratione eos excepturi repudiandae. Fuga veniam, ipsa magnam harum odio maxime repellat.</div>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus rerum cupiditate alias culpa eligendi eaque assumenda, aspernatur officia incidunt quaerat corporis atque modi excepturi maiores rem reiciendis cum voluptas. Aspernatur!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consequuntur omnis assumenda, ipsam modi illo nostrum totam aperiam, ratione eos excepturi repudiandae. Fuga veniam, ipsa magnam harum odio maxime repellat.</div>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consequuntur omnis assumenda, ipsam modi illo nostrum totam aperiam, ratione eos excepturi repudiandae. Fuga veniam, ipsa magnam harum odio maxime repellat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consequuntur omnis assumenda, ipsam modi illo nostrum totam aperiam, ratione eos excepturi repudiandae. Fuga veniam, ipsa magnam harum odio maxime repellat.</div>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus rerum cupiditate alias culpa eligendi eaque assumenda, aspernatur officia incidunt quaerat corporis atque modi excepturi maiores rem reiciendis cum voluptas. Aspernatur!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta iure voluptatum, in eos hic. At reprehenderit, facere delectus, quibusdam iste voluptatibus aliquid adipisci illo consectetur, error dolorum totam earum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consequuntur omnis assumenda, ipsam modi illo nostrum totam aperiam, ratione eos excepturi repudiandae. Fuga veniam, ipsa magnam harum odio maxime repellat.</div> <script src="js/index.js"></script>
</body>
</html>
Overlay using mix-blend-mode - Script Codes CSS Codes
body {
/* background: url('https://images.unsplash.com/photo-1460626399219-57a00a2361cb?crop=entropy&fit=crop&fm=jpg&h=700&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925') no-repeat 100% 40%; background-size: cover; */
}
img { width: 100%
}
nav {
/* background: rgba(163, 15, 25, 0.8); */ color: white; font-size: 1.5em; padding: 1.25em; position: fixed; width: 100%;
/* mix-blend-mode: multiply; */ z-index: 1;
}
.over { background: #e74140; background: rgba(163, 15, 25, 0.8); width: 100%; height: 88px; top: 0; position: fixed; mix-blend-mode: multiply;
}
/* nav::before { content: ' x'; position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 55px;
} */
span { margin-right: 3em; z-index: 10;
}
.container { margin: 1.25em auto; max-width: 1200px;
}Overlay using mix-blend-mode - Script Codes JS Codes
/*
Mock of a transparent fixed nav using `mix-blend-mode` in css. Nice solution taken from Sara Soueidan's blog.
https://sarasoueidan.com/blog/compositing-and-blending-in-css/
*/
| Developer | Chris Maki |
| Username | chrisMaki |
| Uploaded | August 12, 2022 |
| Rating | 3 |
| Size | 2,771 Kb |
| Views | 34,408 |
Do you need developer help for Overlay using mix-blend-mode?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Chris Maki (chrisMaki) Script Codes
| Name | Size |
| Multiply blend mode on hover | 2,641 Kb |
| Css expanding search | 1,728 Kb |
| Mobile navigation using GSAP | 3,145 Kb |
| Morphing svg using Kute.js | 2,417 Kb |
| Simple Modal | 2,114 Kb |
| JQuery style fade in with regular JavaScript | 2,508 Kb |
| Velocity fade in | 2,062 Kb |
| A Pen by chris maki | 2,711 Kb |
| Messing with GSAP | 2,506 Kb |
| Simple Responsive Modal | 2,272 Kb |
Create amazing love letters with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| 3D-box | Parthviroja | 2,346 Kb |
| SVG Animation | Pollardld | 3,133 Kb |
| Portfolio page | Bhavya_j | 2,804 Kb |
| Working around OS X Dynamic Scrollbars | Jrjenk | 2,279 Kb |
| A Pen by Kenny Mark | Kennymark | 5,574 Kb |
| The Monty Hall Problem | Melatonind | 4,360 Kb |
| Ripples in water | Nobitagit | 2,704 Kb |
| Tumblr API | Juanv911 | 2,436 Kb |
| Responsive Advert | James_zedd | 2,354 Kb |
| Long Shadow Button | Uixcrazy | 3,550 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!