This cool effect uses articles as a container to hide images between transitions. It's a great way to bring images onto a scene with minimal CSS effort.

Images are put into articles and then transition onto the scene when a button is clicked. Articles here are hidden until selected by setting z-index to -1 so that it's behind the visible page body. These have black backgrounds to avoid underlying content collision.

Transitions are targeted to article children. First-level sections inside articles are set to half the available screen size width: 100vw; height: 100vh. When the link is clicked, the article's ID is referenced and the target selector sets z-index to 1, making it visible.

The image in the first-level child of each article is the image associated with that article. This is referenced with specificity using the > symbol. Images are placed outside of the viewable area by default with positioning and sizing. A blur filter is applied during transition to accentuate the transition.

Additional rules are applied to the image for when its parent article is selected, bringing the image into view and removing the blur filter.

Behold:


1,113 1 17