SVG Mask Effect

A mask reveal effect, hover the cursor over a container to reveal what's underneath.

The first rule of MRR Club is you do not talk about MRR Club. The second rule of MRR Club is you DO NOT talk about MRR Club.

The first rule of MRR Club is you do not talk about MRR Club. The second rule of MRR Club is you DO NOT talk about MRR Club.

This effect can come handy when you want to reveal some information that is related to the content on the page.

This effect is achieved using the mask-image CSS property. Essentially, we align one div on top of the other and increase the size of the mask when the paragraph is hovered over.

Code

Mask Image SVG and Assets

Here's the SVG that you can save as mask.svg and import in your code.

Place these images into public/demo folder.

<svg width="1298" height="1298" viewBox="0 0 1298 1298" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="649" cy="649" r="649" fill="black"/>
</svg>

We are also using [url(/demo/fightclub.png)] which is the background image, use any image for that matter.

Ready to bring your website to life?

Experience the magic of a stunning website designed just for you! Contact us now, and witness the transformation within 24 hours. No more waiting around - we're serious about making your vision a reality. ✨

John Shahawy
Henrik Söderlund
John Ferry
Meru Gokhale
Georg Weingartner
Book a Call