Activity
Recent Blogs
- Featured
  
  Add Tags to Divi Blog Images Based on Category
  
  Mar 10, 2022 | Recent, Tutorial |
- Featured
  
  How to Increase the Scrollbar Width in Divi Module Settings
  
  Feb 5, 2022 | Recent, Tutorial |
- Featured
  
  7 Effective Ways to Fix Divi Menu Icon Problems
  
  Feb 5, 2022 | Recent, Tutorial |
Support DiviCom

How to create this header text effect? Mixed blend mode?

Tagged: blend, css, effect, header, mode, split, text

This topic has 7 replies, 6 voices, and was last updated 2 months, 2 weeks ago by Faye Daway.

(Viewing 5 reply threads)

- 12 March 2022 at 4:20 am #3453
  Lynne Guistic
  Participant
  
  @lynne
  Up
  5
  Down
  ::
  HELP PLEASE: Hi! How do you create this text effect in Divi? I made a video to show you what I mean. Thank you!
  
  Here are the website links on the video: https://flwr.co.nz/ and https://ingridarna.com/
  Attachments:
- 12 March 2022 at 4:23 am #3455
  
  Maureen Biologist
  Participant
  
  @maureen
  
  Up
  0
  Down
  ::
  https://stackoverflow.com/questions/16146167/text-invert-based-on-background-image
- 12 March 2022 at 4:24 am #3456
  
  Mark Ateer
  Participant
  
  @mark
  
  Up
  0
  Down
  ::
  I wonder if you would apply a filter on the text to invert the color or something ..
  
  Then just use the scroll effect .. I think that should work ..
  - 12 March 2022 at 4:25 am #3457
    Mark Ateer
    Participant
    
    @mark
    Up
    1
    Down
    ::
    there in the filter !
    
    Attachments:
- 12 March 2022 at 4:26 am #3459
  Christina
  Participant
  
  @stina
  Up
  2
  Down
  ::
```
.inverted-text-element {
position:relative;
max-width:600px;
margin:0 auto;
}
.inverted-text-element:after {
background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
background-size:cover;
color:#FFFDED;
width:240px;
left:120px;
}
.inverted-text-element:before, .inverted-text-element:after {
padding: 100px 0;
text-indent: 10px;
position: absolute;
white-space: nowrap;
ccolor: #99794C;
overflow: hidden;
font-size:160px;
content: attr(data-content);
}
```
  - This reply was modified 2 months, 2 weeks ago by Christina.
- 12 March 2022 at 4:28 am #3461
  
  Dee Zynah
  Participant
  
  @dee
  
  Up
  1
  Down
  ::
  <div class="inverted-text-element" data-content="BOOK A VIEWING">
  - 12 March 2022 at 4:29 am #3462
    
    Lynne Guistic
    Participant
    
    @lynne
    
    Up
    0
    Down
    ::
    @dee thank you!
- 12 March 2022 at 4:30 am #3463
  
  Faye Daway
  Participant
  
  @faye
  
  Up
  5
  Down
  ::
  
  How to Create a Split Blend Mode Headline with Divi

(Viewing 5 reply threads)

You must be logged in to reply to this topic.

Search Rooms

Group Activities

Viewing 1 - 5 of 5 items

Terry Hale replied to the topic Elementor Creator Jumps Ship For Divi! 😀 in the forum [Public Group] Divi Community 6 hours, 52 minutes ago

And p.s.: What was the by accident that led you here?
Terry Hale replied to the topic Elementor Creator Jumps Ship For Divi! 😀 in the forum [Public Group] Divi Community 6 hours, 56 minutes ago

Hey Charles, thanks for the great post! I have a backlog of blog topics that I’m starting back on. I took a bit of a hiatus to get my head…
Nathan B WellDigger posted an update in the group Divi Community 7 hours, 2 minutes ago

Great gradients! Comparing the Gradient Types in Divi’s Gradient Builder
D. Charles Caynes started the topic Woops [can’t edit] in the forum [Public Group] Divi Community 2 weeks ago

Rather I meant I was an “Elegant themes fanboy” back in the day, literally before Elementor even existed! 😀
D. Charles Caynes joined the group Divi Community 2 weeks ago

Rooms