262MEDIA

CSS Trick 🤙 You can mask other elements with icons in CSS to create this glittery icon hover/interaction effect ✨ canvas { mask: url(/img/icons/next.svg); } Check this example, inspired by the new @vercel homepage treats that are dropping 🖤 (Had to have a go at whipping this up over food break 😅) 1. Create some <canvas> that animate squares with different hue shades (Using @greensock to only animate on :hover with ticker ⏲️) 2. Mask each canvas with a desired icon 3. On :hover, fade in the animating canvas 🤙 Check out the exploding view! 🤯 @CodePen link below 👇