Dramatic Effect Sections

Default Behavior

The default behavior consists of a slightly sepia image that grows while regaining all its color.

Results may vary for Internet Explorer users because IE does not support CSS variables or clip-path.

...with clip-path

If you add a clip-path, then only the clipped/highlighted area of the front will grow and regain color. The background will go darker and blurrier to create a dramatic effect

Change the effects

By specifying the initial and hover values for the animation (based on CSS filters and transformations), you can create different effects for each image. You can use: blur, brightness, grayscale, or sepia.

Responsive

If the clip-path value is in percentages, it will behave in a responsive way. You can see an example by resizing this window (Bootstrap was used as a base for the demo, but it is not needed for the code to run.)