A tutorial on how to create a simple image effect with little image fragments inspired by some poster art and powered by clip-path.
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: