Title: I&#x27;ve been watching Elon Musk&#x27;s takeover of Twitter, and I&#x27;ve even been personally affected by it (negatively), so I wanted a way to vent using open-source software and some very basic art skills. I woke up yesterday with an idea in mind for a MAD Fold-In[1].<p>A MAD Fold-In is a piece of artwork on the inside-back cover of each issue of &quot;MAD Magazine&quot;. The main image can be folded to reveal a hidden, secondary image.<p>I wanted to share my interactive picture with others, but printing a fold-in and mailing it to friends with instructions seemed really hard, so I searched for a digital way to do it.<p>I found a blog post[2] from Thomas Park where he already did 100% of the work necessary to make a MAD Fold-In using nothing but CSS and HTML and a normal PNG image.<p>Using Inkscape and some Creative Commons images, I drafted a rough piece of artwork and tweaked it until the CSS folded it nicely.<p>I wouldn&#x27;t normally share here, but I think other HN readers may get some utility from seeing and trying out a purely CSS implementation of a MAD Fold-In, even if I didn&#x27;t write the CSS myself. I&#x27;m hoping to start a trend where others make their own fold-ins.<p>Moreover, Elon Musk picked today of all days to rebrand the Twitter logo as a unicode &quot;X&quot; character (𝕏). So, the Twitter bird really _did_ die today, as happened in my MAD fold-in, making my post somewhat topical and weirdly apropos.<p>If this post is too off-topic, please feel free to take it down. If it stays up, please let me know what you think. In the event my server goes down, I made a WayBack Machine archive of the site [3].<p>[1] <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Mad_Fold-in" rel="nofollow noreferrer">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Mad_Fold-in</a><p>[2] <a href="https:&#x2F;&#x2F;thomaspark.co&#x2F;2020&#x2F;06&#x2F;the-mad-magazine-fold-in-effect-in-css&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;thomaspark.co&#x2F;2020&#x2F;06&#x2F;the-mad-magazine-fold-in-effec...</a><p>[3] <a href="https:&#x2F;&#x2F;web.archive.org&#x2F;web&#x2F;20230724221700&#x2F;https:&#x2F;&#x2F;brendenhyde.com&#x2F;foldin&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;web.archive.org&#x2F;web&#x2F;20230724221700&#x2F;https:&#x2F;&#x2F;brendenhy...</a>
Upvote: