Geek Answers Handbook

How to sharpen an image in CSS?

If I have an image downloaded from an arbitrary URL (local or remote), and you do not want to use javascript or server-side processing, can it be bypassed from the client side using CSS?

+5
source share
2 answers

Yes , for some browsers this is already possible (e.g. Chrome and Firefox).

In particular, you need mix-blend-mode and CSS filters .

Here is a code showing Lenna as an example and a (compiled) copy of it as a code snippet:

 .foo, .bar, .bar::after, .baz { width: 512px; height: 512px; position: absolute; } .foo { z-index: 1; mix-blend-mode: luminosity; opacity: 0; overflow: hidden; -webkit-filter: contrast(1.25); filter: contrast(1.25); } .foo:hover { opacity: 1; } .bar, .bar::after, .baz { background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png); } .bar::after { content: ''; -webkit-filter: blur(4px) invert(1) contrast(0.75); filter: blur(4px) invert(1) contrast(0.75); mix-blend-mode: overlay; } 
 <div class="foo"> <div class="bar"></div> </div> <div class="baz"></div>

Hover over the image to see the effect. Adjusting the parameters (and possibly using opacity to “fade out” the effect, similar to adjusting the “intensity” of an unsharp mask) can help in obtaining more desirable results for specific use cases.

+10
source

I found a hack that will sharpen thumbnails using CSS. It only works in Chrome, but in my experience, Chrome seems to blur more images than other browsers. This will basically “undo” the blur and make the image more like the original. Fold the image on top using absolute positioning and set image-rendering to pixelated . Here is an example:

Weird CSS hack for sharpening images (Chrome 59 and 60 only)

0
source

More articles:


All Articles