Sliced Dual Image Layout

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

Sliced Dual Image Layout was written by Mary Lou and published on Codrops.

Leave a Reply

Testimonials

"Kyle has helped our company’s image a lot by redesigning our logo, creating our new website and putting together some great, eye-catching ads. He’s very easy to work with and we were able to hit all of our deadlines."
Elliot Feder - Director of Business Development, SpringBoard Data Management
"Kyle has a natural talent for taking any idea I have and turning it into a visual work of art. He is a genius with layouts and overall concepts, the first person I call when I know a project needs to be done right."
Cheryl Bell, Executive Business Manager, Global Automotive Consultants