Clipping text to reveal video

I need help with a specific effect for my project. I have a video container with an image overlay and a text element positioned at the center. I want the text to act as a clipping mask, revealing the video below, and everything above the video to disappear when the cursor hovers over the element (<div class="video-container">).

I have already set up the basic structure in this CodePen link.

The text “Drone” should appear as a clipping mask over the video.

If anyone can point me in the right direction, it would be greatly appreciated!

Thank you!

I’m not sure if this is what you meant but nay help with your task :slight_smile:

Or this:

It’s quite tricky to get any animation as the cut out text only cuts out from a parent’s background which means you can’t shim an image between them and set its opacity to 0.

There may be better approaches than this but that’s the first one I thought of :slight_smile:

There’s a more complicated version here on CSS Tricks.

1 Like

@PaulOB thank you for the contribution! With some cosmetic changes your pens are exactly what I was hoping to accomplish!

I also appreciate the article. Thank you.

2 Likes

Hey @PaulOB

I have a new Code Pen, link here:

I was able to create my own SVG clipping path, but I am having a very hard time with the associated properties in my clip path. I don’t think I’m really understanding what is happening with the scale property (I get that it is being massively scaled down) and furthermore, I don’t understand why my translate percentages are not having an effect on the positioning of my mask, which should be centered.

<clipPath id="clip-00" clipPathUnits="objectBoundingBox" transform="scale(0.0005, 0.0009) translate(-0.5, -0.5)">

Does this fix it?

<clipPath id="clip-00" clipPathUnits="objectBoundingBox" transform=" translate(50, 50) scale(.0005, 0.0009)">

Somewhat. I am noticing that .box element shrinks the knocked out text moves away from center… Is there a way to make this responsive?

My text version was responsive and a lot easier to manage:) You can change the font and style etc as per normal font rules.

Why do you need a path created text?

You’re right, your version is far easier to work with and it is responsive. One question though, why does the text look squat if the video container height is set to anything other than 100vh?

I can’t figure it out:
https://codepen.io/smangbuca/pen/YzRqaOR?editors=1100

Also, thanks for the continued help!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.