Hover Image Blur · Free Interactions Component
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
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
