Blur all images in Safari, unless clicked

Question

I know that the 'Develop' menu allows me to block all images in Safari, however I have a couple more requirements:

• Blur, not block, all images from all webpages
• Click to show blurred images

I don't like to see images by default, yet still want to retain the ability to selectively 'unhide' them. Blurring the image makes the selection process (of which to show) much easier.

Is there a way to do this in Safari? Perhaps as an extension?

As a bonus, if there is a way to whitelist a set of images or sites (e.g.: the voting buttons in Stackexchange), that would be great.

Answer 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.

Answer 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.

Answer 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.