Hover Image Slicer

modern and interactive image component that splits your image into 4 animated pieces and merges them smoothly on hover.

modern and interactive image component that splits your image into 4 animated pieces and merges them smoothly on hover. Perfect for portfolios, galleries, landing pages, or product showcases that need a sleek and cinematic feel.

Customizable option:

• Image: upload or select your desired image.

• Pattern: choose slice animation style:

  • Grid (classic four-square split),

  • Diagonal (angled motion),

  • Diagonal 3D (adds depth with perspective),

  • Random (playful scatter).

• Gap: control the space between image pieces when separated.

• Duration: adjust the animation speed for hover transitions.

• Radius: set border radius for soft or sharp corners.

• Shadow: tweak the drop shadow intensity for depth.

• Scale: control how much the pieces shrink during the hover effect.

• Rotation: set the degree of rotation for a dynamic motion feel.