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.
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!
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.
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).
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.
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
@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.
