Join
Join

044Mask effect

In this effect, we will move a gradient mask based on the position of the user’s cursor. To make the effect more interesting, the mask will reveal a duplicate of the component’s content but with different colors and another image. Do you have your concentration music on? Then let’s go!

HTML Structure

The containers division will be made up of a child and its duplicate. The duplicate will be positioned on top of the original content. The aria-hidden="true" attribute is used on the duplicate. This tells screen readers to ignore this division.

<div class="root">
    <div class="containers">
        <div class="container">
            ...
        </div>
        <div class="container duplicate" aria-hidden="true">
            ...
        </div>
    </div>
</div>

Become a member to unlock
the full effect today.

Join now

Discover the platform

See how the platform works: try Effect #000 for free.

Try it now

(No registration or credit card needed)