A main container holds and centers the images on the page via flexbox. An additional flexbox houses the images with a small gap between each image.

The setup of the mask reveal is relatively simple. A base image acts as the container for the secondary image, which fills the base image absolutely at 100% height. To achieve the masked animation effect, we set an initial clip-path: ellipse(100% 0% at 50% 0%) to the secondary image. This creates a wide elliptical shape for the secondary image to fill, with an x position of 50%, which is the horizontal center of the base image.

Next, a hover pseudo-class is added to the base image so that when it’s hovered, a new clip-path of clip-path: ellipse(80% 100% at 50% 50%) is applied to the secondary image. The ellipse is given a slightly smaller width of 80% and a height of 100% to emphasize the radial effect. Additionally, the new clip mask is positioned in the center of the base image at 50% 50%. This positioning ensures that the new clip path, which contains the secondary image, covers the base image completely.

Essentially, the secondary image is given an initial clip-path shape and position, then animated to a secondary clip-path that covers the base image. A transition of transition: clip-path 1s cubic-bezier(0.65, 0.05, 0, 1) is given to the secondary image to create a smooth transition between clip-path states on base image hover.

Media queries target the base images via :nth-child to remove images on smaller screen sizes. By targeting media items via :nth-child, dynamic adjustments can be made to images without requiring too much specificity in selectors. Basically, this workflow stays scalable and dynamic.

Lastly, JavaScript is used to hijack hover behaviors since there’s no “hover” on mobile. In JS, touchstart fires when a user presses down on the image, adds an "active" class, and the animation plays. Additionally, touchend fires when a user releases, removes the active class, and the animation reverses. Lastly, touchcancel handles edge cases like a touch moving off-screen or being interrupted. Desktop devices don’t have touch events, so they naturally fall back to CSS :hover.