Blur all images in Safari, unless clicked

Solution 1:

The following approach comes pretty close, but it does not (nor can it) cover images that are set as background. It might also slow down page loading a bit.

The goal is to inject custom CSS into the page. I'll use the add-on Stylish for that (theoretically you could do it without any external add-ons, but you need a free Safari developer ID to do so - see here - I was wrong, see @markhunte's answer). After installing Stylish, you will see a great 'S' button next to the URL field. Click it and select 'manage'. In the new tab, select 'Edit' to create a new style. Give it a title (perhaps 'Blurred images'), and paste the following CSS into the 'CSS' field:

img {
  -webkit-filter: blur(10px);
}
img:active {
  -webkit-filter: blur(0px);
}

Under 'Applies to:' select 'global (if you want, you could narrow it down to specific URLs, URL prefixes, domains etc.), then save the style to enable it.

If you load a webpage, all images (except for background images) will be blurred. If you click an image it will be un-blurred as long as you hold your mouse-button down. You can customize the degree of blur by editing the pixel value in the first selector as the second selector un-blurs the image.

This is all you can do in plain CSS. If you want a selective whitelist that persists across sessions, you definitely need to write your own extensions. This still comes down to applying the CSS posted above, but the whitelist and the 'click-to-add' part may be a bit more complicated and I do not have enough experience to give you a helpful answer in that case.

Solution 2:

This is an add on to @thee's answer.

You can add the css code in their answer without third party apps or a Developers id.

create a .css file by pasting the code as plain text in to a text file. You can use TextEdit.app to do this. Save the file as a .css

Then in Safari got to Preferences> Advanced tab. And using the drop down menu> Other.. of the Style sheet option, navigate and select your file.

Safari will immediately pick up the style sheet and start using it.

Solution 3:

img:hover { opacity: 1; }

This allows you to just mouse over the image to have it appear. It has minimal impact on the resources and you don't have a problem where cliking on an image performs an action you may not want.