Many of you must already have seen some posters or images with a fun distortion-like effect: some pieces of the image are cut out and placed in a different position. Something like this:

It’s something simple and original. The pieces are very small which creates an interesting and creative look. More examples here.

You might be surprised but all this beauty can be done 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.

If you liked this idea and want to learn how to do this, the Codrobs prepared a tutorial for you where explain step by step what you need to do to get the same result.  Moreover, to add some more fanciness, they added an option parallax (or tilt) effect. That’s why they will be using two nested divisions. You can follow the tutorial here.

Good Luck.