1

Ive got a site with a bunch of png icons, they are all black and white images - a black logo on a white background.

At the moment we have an on hover effect that hides the first png and reveals a inverted png behind, at the moment we are exporting 2 images : 1) black logo on white background, 2) white logo on background from photoshop.

This got me thinking is it possible to invert the png file with JS or possibly even new age CSS ?

(By invert i mean swap the black for white and visa versa white for black in the images)

Unfortunately these are 3rd party images which i have a .png files, if i had them as .svg i know i could invert the .svg 'on the fly'.

sam
  • 9,486
  • 36
  • 109
  • 160
  • 1
    You can use the `filter` property in CSS, but it's only supported in webkit browsers: http://stackoverflow.com/questions/17741629/invert-color-using-css – Rory McCrossan Jul 08 '16 at 09:30
  • 1
    You could do this on any browser that supports `canvas` by rendering the PNG to a canvas, getting the image data (you can get it as pixels), inverting the pixels, and grabbing the result. I've never done it, but it should be straight-forward. – T.J. Crowder Jul 08 '16 at 09:31
  • This is a bit off-topic, but when using a Cloud Image Service like Cloudinary, you can apply many filters just by changing the image URL; The transformation is done server side, then cached (the Browser will still handle it as separate images). http://cloudinary.com/documentation/image_transformation_reference#effect_parameter (this is called: Negate) – thmshd Jul 08 '16 at 10:17
  • you can do this cross browser (including IE 10+) by using the SVG image tag and an SVG filter within some inline SVG – Michael Mullany Jul 08 '16 at 23:44

2 Answers2

3

Yes use a filter from css. see the code below;

img:hover {
-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);
}
<img src="https://newevolutiondesigns.com/images/freebies/black-white-background-1.jpg">
Allan Empalmado
  • 943
  • 1
  • 6
  • 12
1

The CSS Filter invert function works pretty well.

  • This question seems to answer this question and whole lot more.

  • For more on CSS Filters: An awesome article by Alex Danilo.

  • And, my personal favorite, an article from CSS-tricks