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.
