Hover Image Blur
Hover-to-reveal image with customizable blur effect. Control blur amount, overlay, brightness, zoom, transition speed & easing. Ideal for interactive galleries and portfolios.
Make it with Workshop
Build your own component with AI
About this 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
