A CSS only method - No javascript/jQuery

How to have sections of a page fade into view as the page scrolls. This works in Edge, Chrome and Opera. But can aslo be made to work in Firefox from version 114: this feature is behind the layout.css.scroll-driven-animations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

You can also click/tap any image to see a larger image fitting the browser window. This is all done using :focus-within() which works in all the latest browsers.

The html for this is just 3 lines plus a line for each image, and the CSS is also very simple and will work with any number of images.