custom-css How do I create a masked (knockout) headline text effect?

Site URL: http://absorbproductions.com

Hello! I'd like to have a text effect similar to the codepin (linked below) on only the homepage of my site, www.absorbproductions.com

Codepin: https://codepen.io/Moslim/pen/zwJPgL (screenshot attached as well)

Instead of having a GIF behind the text, I'd like to have the video that's currently linked in the header banner on my site. Any help would be appreciated!

Hi,

Apply it for Banner text or?

Hi! Sorry for the delay, I just saw your response on this thread. I would like this effect to be applied only to the text in the first section of my home page. Currently, that text looks like the screenshot I've attached here. I'd like to instead make the text centered with the knockout/mask effect applied with a video banner below.

You can see the site that I would like this to be applied to here: www.absorbproductions.com
And a Codepin of the effect here:  https://codepen.io/Moslim/pen/zwJPgL

On 3/31/2022 at 12:38 AM, chymer said:

Hi! Sorry for the delay, I just saw your response on this thread. I would like this effect to be applied only to the text in the first section of my home page. Currently, that text looks like the screenshot I've attached here. I'd like to instead make the text centered with the knockout/mask effect applied with a video banner below.

You can see the site that I would like this to be applied to here: www.absorbproductions.com
And a Codepin of the effect here:  https://codepen.io/Moslim/pen/zwJPgL

Add to Design > Custom CSS

/* Top section text Codepen effect */
div#block-bf66ca977ef94b68c5a7 h2 {
background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
 background-size: cover;
 color: transparent;
 -moz-background-clip: text;
 -webkit-background-clip: text;
 text-transform: uppercase;
 font-size: 50px;
 margin: 10px 0;
}

On 4/1/2022 at 9:44 AM, tuanphan said:

Add to Design > Custom CSS

/* Top section text Codepen effect */
div#block-bf66ca977ef94b68c5a7 h2 {
background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
 background-size: cover;
 color: transparent;
 -moz-background-clip: text;
 -webkit-background-clip: text;
 text-transform: uppercase;
 font-size: 50px;
 margin: 10px 0;
}

 

This worked! One issue though: when replacing the image URL with a Youtube link, it doesn't work. Any suggestions on how to get this effect with a YouTube link instead of an image URL?

Thank you!

6 hours ago, chymer said:

This worked! One issue though: when replacing the image URL with a Youtube link, it doesn't work. Any suggestions on how to get this effect with a YouTube link instead of an image URL?

Thank you!

Hi. No way. background-image attribute work with image only

You can consider using gif image.

13 hours ago, tuanphan said:

Hi. No way. background-image attribute work with image only

You can consider using gif image.

Darn, thank you for the information though! I'll play with it and see what alternatives I can come up with. Thank you! 🙂

Hi @tuanphan, I'm trying to use this same effect on a website but something isn't working.  I think it's something with the "-webkit-background-clip: text;"? Any help would be much appreciated!

https://moose-chinchilla-wpdt.squarespace.com/

pw: Hawthorn

This is the section I want to apply it to (on the homepage): 

On 3/22/2023 at 12:02 AM, Chlobot said:

Hi @tuanphan, I'm trying to use this same effect on a website but something isn't working.  I think it's something with the "-webkit-background-clip: text;"? Any help would be much appreciated!

https://moose-chinchilla-wpdt.squarespace.com/

pw: Hawthorn

 

This is the section I want to apply it to (on the homepage): 

Use this code

div#block-yui_3_17_2_1_1679414865684_12578 * {
    background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
    background-size: cover;
    color: transparent;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    text-transform: uppercase;
    font-size: 50px;
    margin: 10px 0;
}

@tuanphan Worked perfectly! Thank you so much!!