Activity
Recent Blogs
- Featured
  
  How To Keep Text Static In Your Divi Sliders
  
  Aug 7, 2022 | Recent, Tutorial |
- 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 |
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 11 months 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 11 months 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 Theme effect in the forum [Public Group] Divi Community 3 weeks, 2 days ago

Hey, @biggi It looks like there are several great things going on with that hotel site. Can you be more specific about which feature you would like to emulate?
Nathan B WellDigger posted an update in the group Divi Community 4 months, 3 weeks ago

Learn how to create templates from layout packs and use them across multiple sites! How to Create Template Sets Using Divi’s Theme Builder Library
Nathan B WellDigger posted an update in the group Divi Community 5 months, 3 weeks ago

Learn how to create some really amazing masked section dividers! How To Combine Background Masks with Section Dividers in Divi
Nathan B WellDigger posted an update in the group Divi Community 6 months ago

Divi Cloud storage has now expanded to allow you to store your Theme Builder Library templates and template sets! Introducing The Divi Theme Builder Library With Divi Cloud Storage
Nathan B WellDigger posted an update in the group Divi Community 6 months ago

Chaucee teaches us how to manipulate background mask and pattern settings to create some eye-catching patterns for your hero areas. 5 Background Mask & Pattern Overlays You Can Apply To…

Rooms