Now is your last chance to buy a lifetime license before we switch to annual pricing. Existing licenses will be unaffected.
read more
Get Oxygen 4.9 in our Ultimate package for only $179.
TUTORIALS / Design How-To's /
1
Rotation Effect Using the New CSS Transforms Feature in Oxygen 2.2
2
Create Overlapping Elements with Z-Index / Negative Margin
3
Multi-Line Gradient Button
4
Color Dodge Blend Mode Effect in Oxygen
5
Screen Blend Mode Effect in Oxygen
6
Animated Hexagon Buttons with CSS Transforms in Oxygen
7
Overlay Header Effect for Specific Pages
8
Sticky Notification Bar in WordPress
9
Exit Intent Popup in WordPress
10
How to Show or Hide an Element Based on if an ACF Field Contains Data
11
How to Create a WooCommerce Shop Page Using Oxygen
12
How to Build a WooCommerce Single Product Template using Oxygen
13
How to Build the WooCommerce Cart, Checkout, and Account Pages using Oxygen
14
How to Build a Custom Dropdown Megamenu in Oxygen
15
How to Build a WordPress Blog with Oxygen
16
How To Make A Featured Blog Posts Section Using Oxygen
17
How To Make A Custom WordPress Login Page Using Oxygen
18
How To Build A WordPress Landing Page Using Oxygen
19
How to Make A Mobile Friendly WordPress Site Using Oxygen
20
How To Make A Data Table In WordPress With ACF Pro And Oxygen
21
How To Use Layered Classes In Oxygen To Style Your WordPress Site
22
How To Build A Client Friendly WordPress Site With Oxygen + Gutenberg
23
How To Make An Animated Heading Slider In Oxygen
24
How To Build Your Own Gutenberg Blocks Using Oxygen
25
How to Add Infinite Scroll To Your Posts List In WordPress With Oxygen
26
Fancy Styles For Google Maps In WordPress With Oxygen
27
Building A Lightbox With Oxygen's Modal Element
28
Creating An Animated Icon Button In WordPress With Oxygen
29
How To Build An Off Canvas Menu Using Oxygen's Pro Menu Element
30
How To Make Scroll Activated Animated Progress Bars In WordPress With Oxygen
31
How To Use fullPage.js With Oxygen
32
How To Make A Search Icon With Animated Field Reveal In Oxygen
33
How To Create A Design System For Oxygen
34
Simple Password Protection With Conditions In Oxygen
35
Creating Animated SVG Line Drawings In WordPress With Oxygen
36
Using CSS Grid With Repeaters In Oxygen
37
Using Animated Gradient Backgrounds In WordPress With Oxygen
38
Implementing Fluid Typography For Headings In Oxygen
39
Using Utility Classes For Rapid WordPress Design In Oxygen
40
How To Easily Create Tooltips In Oxygen With Tippy.js
41
Using Rellax.js In WordPress With Oxygen
42
Choosing A Color Palette From An Existing Website
43
Building A Flipbox In WordPress With Oxygen
44
Using Isotope To Sort & Filter Posts In WordPress With Oxygen
45
Preparing Your Oxygen Site For Client Handoff
46
Roll Your Own Membership Site With Oxygen & EDD
47
Creating A Custom 404 Page For Your WordPress Site
48
Creating A Vintage Photo Layout In WordPress With Oxygen
49
How To Set Up A Simple Content Review System In WordPress With Oxygen
50
How To Make A Smart Search Results Template For WordPress With Oxygen
51
How To Make A Split Slider In Oxygen
52
Rebuilt: Creating Video Tabs From Divi Home Page In Oxygen
53
How To Add A Popup To WooCommerce Thank You Page
54
How To Easily Build A Responsive Gallery With Oxygen
55
How To Add A Fancy Custom Cursor In WordPress With Oxygen
56
How To Create A Flyout Search Form In Oxygen
57
Easy Filtering In WordPress With jQuery And Oxygen
58
[Newbie Guide] Templating Crash Course For Oxygen
59
Using ACF Bi-directional Relationship Field In WordPress with Oxygen
60
How To Create A Vue App In Oxygen
61
[Newbie Guide] Classes Crash Course For Oxygen
62
How To Make Your Shape Dividers Change On Scroll
63
Making A Dark Mode Toggle In WordPress With Alpine.js And Oxygen
64
How To Build A Responsive WordPress Site In 2021 (Part 1)
65
How to Build A Responsive WordPress Site In 2021 (Part 2)
66
How to Build A Responsive WordPress Site In 2021 (Part 3)
67
How To Build A Directory Site Using WordPress, Oxygen, and Directorist
68
How To Visually Build WordPress Queries Using Oxygen
69
How To Build A CSS-Only Infinite Logo Slider In WordPress With Oxygen
70
Creating A Dynamic Image Accordion In WordPress With Oxygen
71
Creating A Horizontal Card-Style Post List In WordPress With Oxygen
72
Using CSS Variables In WordPress With Oxygen
73
Creating A CSS-Only Image Hotspot Element In WordPress With Oxygen
74
Building A Landing Page With Subtle Motion Effects In WordPress With Oxygen
75
Building A Recipe Checklist Template With Oxygen And ACF
76
Creating A Simple Mouse-Based Parallax Effect In WordPress With Oxygen
77
Image Performance & Accessibility Features In WordPress With Oxygen
78
Making An Image Comparison Slider In WordPress With Oxygen
79
Using Animated GIFs In WordPress With Oxygen
80
Making A Frosted Glass Sticky Header In WordPress With Oxygen
81
Creating A Scroll Activated Sliding Image Gallery In WordPress With Oxygen
82
Making A WordPress Page With AI Generated Art
83
The Best Free WordPress Form Plugins For Oxygen Sites
84
How To Create & Implement More Beautiful Gradients In WordPress Using Oxygen
85
Implementing Lottie Animations In WordPress With Oxygen
86
Creating A Sticky Timeline Element In WordPress With Oxygen
87
How To Use Native WordPress Password Protection On Pages In Oxygen
88
Oxygen Basics: Creating Headers with Oxygen
89
Oxygen Basics: Creating Hero Sections with Oxygen
90
Oxygen Basics: Creating Social Proof Elements with Oxygen
91
How To Create Accessible Skip Links
92
Oxygen Basics: Creating Content Sections with Oxygen
93
Using REM Vs. PX For Font Sizes In Oxygen
94
Oxygen Basics: Creating Features/Services Sections With Oxygen
95
Building A Super Minimal CSS Framework With Oxygen
96
Creating Dynamic HTML Lists
97
How To Make A Sticky Image Columns Section In WordPress
98
How To Make A Header Menu With A Centered Logo In WordPress With Oxygen
99
Make A Link In Bio Page Using WordPress

Screen Blend Mode Effect in Oxygen

Video

5

of 99

in Design How-To's
Description
Comments (0)

In this tutorial, you'll learn how to make a screen blend mode effect using the new CSS Blend Modes feature in Oxygen 2.2.

With the blend mode feature of CSS, you can create Photoshop-like effects directly in the browser.

You can apply blend modes to any element from Advanced > Effects > Opacity in the Oxygen builder. Blend modes can also be applied to background layers from Advanced > Background > Background Blend Mode.

In this tutorial, we'll use a section, a heading, and an absolutely positioned image set to screen blend mode to create an effect where the image shows through the heading text only.

Leave a Reply

Your email address will not be published. Required fields are marked *

Author
Louis Reingold
Louis Reingold

Follow along with this tutorial

Create Test Install

Get Oxygen Today

Lifetime, unlimited site license

Need more help?

Copyright © 2024 Soflyy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram