Photoshop Question posted in
The official user guide can be found here.

Is it possible to invert a png with JS / CSS? – Photoshop

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

Tags:

2

Answers


  1. 0

    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">
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search