Jump to content

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

Recommended Posts

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!

 

Screen Shot 2022-02-22 at 1.33.32 PM.png

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 month later...

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

Screen Shot 2022-03-30 at 1.34.58 PM.png

Link to comment
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

Screen Shot 2022-03-30 at 1.34.58 PM.png

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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! 🙂

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.