A wavy circle with cool hover effect
Place you image inside a wavy circular frame powered by modern CSS (mask, trigonometric functions, @property, animation-composition and more)
- No extra element (only the
<img>tag) - No pseudo element
- A cool animation on hover
- Optimized with Sass and CSS variables
See the Pen Wavy circles with hover effect by Temani Afif (@t_afif) on CodePen.
More detail: frontendmasters.com/blog/creating-wavy-circles-with-fancy-animations
More CSS Tips
- Smoothly stop a rotation on hover A simple CSS trick to slowly stop a rotation on hover.
- Accelerate a rotation on hover A simple CSS trick to speed up of your rotating element.
- CSS Functions that work without arguments Some functions in CSS don't require arguments and it can be helpful.
- Create a flower shape using CSS mask Use an online generator to create a fancy flower shape using mask.