Sliced Dual Image Layout

Some layouts with sliced background images, slideshow functionality and glitch effect.
DualSlicesLayout

Today we’d like to share some layouts with a sliced image look with you. The idea is to show some text elements in a grid layout and change the content and images in a slideshow fashion. For the background image slices, we created a little plugin that has a couple of additonal options. For making an interesting transition, we use a glitch effect. This effect we also apply to some of the text.

This demo is kindly sponsored by: FullStory: See Every Click, Swipe, and Scroll.

Attention: We use a couple of new CSS properties, like CSS grid and clip-path which will only work in modern browsers.

Have a look at the demo screenshots:

SlicedDualImageLayout_01

SlicedDualImageLayout_02

SlicedDualImageLayout_03

We hope you enjoy these layouts and find them useful!

References and Credits

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.