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.
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
<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.