044
Mask 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>