A CSS-only fragmentation effect
Add a hover aniamtion with a fancy fragmentation effect using only the <img> tag. Powered by CSS Mask, @property and optimized with CSS mask
See the Pen CSS-only fragmentation effect on hover by Temani Afif (@t_afif) on CodePen.
More detail css-tricks.com/image-fragmentation-effect-with-css-masks-and-custom-properties
More CSS Tips
- Rounded tabs with inner curves A few lines of code to get rounded tabs using CSS mask.
- Fluid typography with discrete steps Improve your fluid typography implementation using the round() function.
- Accelerate a rotation on hover A simple CSS trick to speed up of your rotating element.
- Turn an image into a postage stamp A few lines of code to create a cool postage stamp shape.