Streaming live at 10am (PST)

Adding a color overlay to a transparent background PNG


#1

I am trying to add a color overlay set to 75% opacity to a logo that is a transparent PNG so that only the image itself changes color and not the white background the transparent image sits on. Is there a way to do this in Webflow/CSS?

Here is a sample image. I would want to first convert the image to greyscale using that filter, then somehow apply a gold #bea770 75% opacity layer on top of the logo, which I would want to only color the logo itself and NOT the background it sits on.

Anyone know if there is a way to do this?

Icon3


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi
That is not possible to do in Webflow.

This is the nearest I could come: http://overlay-over-png.webflow.io :grinning:

Maybe you could do that with PS or something, change colors, adding overlays and get the desired effect?


#3

Ok, so I wasn’t missing anything, that’s good to know. I tried a lot of ways with no luck too. I wanted to avoid doing it in PS because there are hundreds of images and they change from time to time. Wanted a more dynamic solution.

If anyone has any custom code or 3rd party JS ways of doing this I am all ears. Thanks for the assist @jorn!


#4

You could have two variations of the same logo positioned on top of each other, and create an on hover-effect that fades one out and the other in so that you get a color change.


#5

I could but that would again have me creating hundreds of images with the gold overlay on them and then transitioning between the 2 OnHover. I was hoping to find a solution where I could use one color version of the logo and then use CSS/JS/Webflow to change it to greyscale and apply the gold overlay, but then show the full color OnHover.

I can do it in Webflow but it applies the gold overlay to the entire square of the transparent PNG, when all I want it to be applied to is the transparent PNG istelf and not the white background (which you can see that happens in Jorn’s example above too).


#6

Maybe I don’t understand the effect you are going for, but with opacity animation you can get a smooth transition. Here is an example I did with two images.

https://preview.webflow.com/preview/graphic-overlay?preview=cc0108c3ce1312213da7bc9073afc72c


#7

If the images where in SVG’s maybe with scripts you can have the desired effect but with png’s and jpg’s I don’t think it’s possible really, outside bitmap editors anyway. But I’m not a developer so maybe its possible some how :grinning:


#8

@NewInBoston, so what you have done is definitely a way to do it but it requires you to create multiple images for each logo. I don’t want to do that because there are hundreds of logos, so then multiply that by 2. I just want the same gold opacity overlay on a logo that is greyscaled using the CSS filter. So then I am just applying the same effect using CSS/JS to the logo, not creating multiple versions of the same logo like you have done in your example.