component
Hover Image Blur
By Soubhagya Sahu
Details
- Soubhagya SahuAuthor
- componentType
- 2025-10-23Published
- 2025-11-29Updated
- 2025-10-14Added
- EffectsCategories
Summary
An interactive image component that starts blurred and reveals the full, clear image on hover.
Description
An interactive image component that starts blurred and reveals the full, clear image on hover. Perfect for creating engaging galleries, portfolio showcases, and interactive visual experiences with smooth, customizable transitions. Features: Responsive image upload with automatic optimization and positioning controls Adjustable blur intensity from 0-50px with smooth reveal transition Brightness control for blurred state (0-150%) Color overlay with customizable opacity (0-100%) Optional zoom/scale effect on hover (1.05x magnification) Customizable border radius (0-200px) for rounded corners Adjustable transition speed (0.1-2 seconds) 10 easing curve options (Linear, Ease In/Out, Circ, Back, etc.) Hardware-accelerated rendering for smooth 60fps animations Touch-friendly for mobile devices Works seamlessly in canvas, preview, and published sites No coding required - all visual property controls Fixed layout support for precise sizing
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #3774