A tutorial on how to create a simple image effect with little image fragments inspired by some poster art and powered by clip-path.

Today we’d like to show you how to achieve a very simple, yet interesting effect with an image. The inspiration comes from a poster of the Grand Canyon with a fun distortion-like effect: some pieces of the image are cut out and placed in a different position. The pieces are very small which creates an interesting and creative look. We’ll be showing you today how to create a similar effect with CSS and some JavaScript.

The general idea is to create a division that has a background image and then add several new divisions dynamically. Each one of those child divs will be translated and another inner div will have a clip-path, showing only a tiny part of the image. To add some more fanciness, we want it to be possible to have an option parallax (or tilt) effect. That’s why we’ll be using two nested divisions.

Let’s get started!

The “Little Fragments” Markup

What we need initially in order to create our dynamic fragments is just a simple div with a background image: