Changing the color of and image as hovering

Design help General
1

Hi,
How can I change the color of an image while hovering it?
I want to change from a gray transparent picture to a colorful one with full opacity.

Thanks,
Noam

2

Images filters aren’t available in Webflow. You can add them with custom CSS code though. But then even the hover state would have to be defined in CSS instead of Webflow.

3

If image size is not an issue, maybe a solution would be uploading two versions (gray and color) and fade out the gray one on hover.

You could also try (untested) to do something like:

<div class="image gray"><img></div>

…then add the custom code as @vincent mentioned, but make it apply to image.gray, then copy the div, remove the class gray on the copy, position the divs so the copy is below the first one (maybe needs z-index) and then fade the gray one out on hover. This way you can work in webflow for the hover and would only need one image.

1 Like
4

Hi Tom,
thanks for the replay.
Unfortunately I am quite new to the world of webflow and to the world of web design/programming in general.
The CSS method is not really possible right now.
So is there a way by using the webflow interface to upload a gray image and a colorful one then swap them?

Thank you!

5

Here’s how I solved this issue for the site I am currently working on:

  1. Create two image assets: 1 grey, 1 color.
  2. Add a div block and assign the grey image to the background
  3. Drop a link block inside the div block:
    • Assign the color image to the link block’s background
    • In the style palette, under the Effects section, set the opacity of the link block to 0%, and add a Transition>Background>Opacity.
    • At the top of the class selector on the style palette, there is a States pick list: select hover
    • Now that you are styling the hover state, go back to the Effect section and set your opacity to 100%
  4. View the page in Preview mode. Rolling over the div block should change the state from grey to color.

This approach does require a workaround for touch devices if the image you are changing on-hover is going to be a link. That’s because the colored image is the link block, and that won’t show up on a touch device. You will need to hide this on touch devices and replace it with a link block that is always visible.

The above is basically from the tutorial Webflow provided:

There’s probably a quicker solution, but I just started working in Webflow.

4 Likes
6

is your png image a white circle with transparent background? If you can post a link for us to check it out it would be really helpful because your issue is not very clear. more click

7

Thank you very Brian. I will try this soon.

8

@endlessblink @Brian I am a total newbie as well, but have been obsessively playing with this. You can do a roll over (hover) state on any element. It does not require it to be a link block, and the elements can be nested or stacked in a container div, so the element disappearing on hover - or - showing up on hover will work with a transition. Set your link on the base element or even using an invisible button nested anywhere in the stack. Then you can just hide the hover element on mobile - or I think maybe you could even toggle off the transition on mobile. Quite a few options on how you choose to skin it - chose the method you brain gets the easiest and explore (obsessively). Webflow is uber-flexible and equally addictive :slight_smile:

1 Like
9

Hi @endlessblink

Another thing you can do is simply swap out the background image of a Div on hover :wink: The static version would be Grayscale, the Hover would be full color.

Problem here is you would have to create a new class for each image (assuming the background image would be different from one another).

But just another way!

Mat