Hover Image Blur

An interactive image component that starts blurred and reveals the full, clear image on hover.

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