Sliced Dual Image Layout

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

By Manoela Ilic in Playground on
Demo Code

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.

DualSlicesLayout

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

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

We hope you enjoy these layouts and find them useful!

References and Credits

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Large Image to Content Page Transition

Animate Anything Along an SVG Path

Some More On-Scroll Typography Animations

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 12

Comments are closed.

  1. Just FYI, one year ago I coded this website. Pretty much the same effect, but with some increased functionality like mouse and mobile device orientation interaction. It’s really fun on mobile devices, git it a try!
    http://catarinagarcia.com

    • @Gabe Deko

      its easy to implement. in the first layer its having a big horizontal picture and repeating it in the X axis. then when you move your mouse in that axis it changes the background position.

      on the top layer it has multiple divs with the same background image to. but different initial background position. and again when you move the mouse it changes the background position.

    • @Gabe Deko it’s pretty much what @Reza said, with the added functionality of mobile orientation doing the same thing as the mouse position would do. Check the source code, if you’re curious. Thank you for your comments, BTW.

  4. Very cool approach! CSS is rocking man. Seems we don’t need photoshop and all to bring out such effects. Like it:)

  7. How can we make it rotate automatically after a said time interval?
    Like… right I have to click on “New York”, “London” or “Paris” to switch between the slides. I want it switch automatically.
    Any help?