Multiple Background Images Crossfade Animation using GenerateBlocks (CSS-only ⚡ No Javascript!)

In this tutorial, I’ll share a CSS-only solution for creating a section with multiple background images that crossfade on repeat.

This is a simple solution that shouldn’t hurt your performance (other than loading 3 images instead of 1 — just be sure to optimize your images!) since we don’t have to introduce any new plugins or Javascript.

You can find the code I used in this tutorial here: https://generatetweaks.ogal.dev/cross… Note: I did find some “mistakes” in the video I chopped out to simplify things (nothing major).

The code linked above is the most accurate version (and you might notice there is some EXTRA code in the video that ended up not being necessary. I apologize for this — this was take #3 and I just couldn’t stomach doing it again 😅. It was either make these concessions or dump the whole video in the bin. Slowly getting better at this video tutorial thing — but it hasn’t been easy for me!

Thanks for understanding!