Folding Image Hover Effect

This interactive image layout turns a simple row of images into a folding hover experience.

As you hover over each image, the panel shifts and folds to create a dimensional transition, while the surrounding images respond to the movement. The effect gives a standard set of images a more editorial and interactive feel without changing the underlying content.

How to make this:

It was made by first creating a normal Squarespace image block and adding the images and text in Squarespace, but this could be done any any image or block in Squarespace.

The section (or images) were then selected with Compose and transformed into the folding interaction.

Compose was used to control the hover animation, transitions and spacing while keeping the original Squarespace content in place.

Starting Prompt:

On hover, fold each image like paper. Split the image into two halves along a horizontal centre crease and fold them in real 3D, the crease dips in, overshoots slightly, then settles into a gentle resting fold, and flattens back out smoothly on mouse leave. Add a soft shadow that deepens toward the crease while folded, plus a faint light line along the fold itself so it reads as paper catching light. Use GSAP for the timing so the crease has a bit of life instead of a stiff hinge. Keep the original image crop and focal point intact. Make fold angle, resting angle, duration, easing, shadow strength and crease direction adjustable.