CSS Tricks: Recreating the Mad Magazine Fold-In
If you grew up with Mad magazine, you remember the back-cover gimmick: a wild illustration on one page that, when folded into thirds, revealed a completely new image and text hidden in the design. That clever trick has now been recreated on the web with pure CSS.
Developer Thomas Park has demonstrated how to build the fold-in effect using nothing but CSS transitions. What's most surprising is that the effect works with only :hover and :active pseudo-classes — no @keyframes required.
One might expect 3D transforms to need careful keyframe control to shift between positions during an animation. But Park's approach uses multiple transitions on both parent and child elements to handle the folding smoothly, as the folded page hides the middle third and formats a separate image.
While you're exploring creative CSS paper effects, there are several other recent examples worth checking out:
- A new effect from Lynn Fisher
- A classic from Mandy Michael
- More folding experiments from Mattia Astorino
