Sometimes, I post things that might not be liked by everyone. Text is easy to hide or ‘spoiler’, but images are harder. So I sought out a way to make images work like they do on Mastodon’s web interface.

Enter, this neat little CSS technique that uses no JS (web archive link). Essentially, it uses a form element (checkbox) and a label to toggle the CSS blur filter on an image. I’ve implemented it in a previous post, one that contains advertising, and since I don’t like seeing advertising, I’ve spoilered it.

I did add a bit of JS to the trick. See, because my site is not a discreet set of pages per post, the state of the page can be remembered across reloads. So I add some simple JS to uncheck all checkboxes on the page.

A Revision in the Texts!

So, yeah, it was kind of janky. Enter 3 lines of jQuery:

$(".blurred").each(function() {
  $(this).on("click", function() {
    $(this).toggleClass("blurred");
  });
});

I’ll probably add some text or note to prompt user action.