Curved avatar header with hover effect
I am using the inner curve/notch shape to create a fancy header with an avatar and a cool hover effect.
- No complex HTML code
- Powered by CSS mask,
@propertyand math functions - Optimized with CSS variables
See the Pen Fancy avatar header with hover effect by Temani Afif (@t_afif) on CodePen.
Another version with a drop effect
See the Pen Fancy avatar header with hover effect II by Temani Afif (@t_afif) on CodePen.
More CSS Tips
- Remove the unit from any CSS value A hacky CSS trick to transform an length value into an integer.
- Update CSS variables using range slider A CSS-only way to update CSS variables in real time using range slider.
- Quantity queries using has() selector a simple way to generate a quantity query selector using modern CSS.
- A decorative line with rounded dashes A few lines of code to create a nice decoratinve line with rounded dashes.