Need help with Colour changes in hover

Design help Animations & Interactions
1

Hello! Can someone help me really quick on how to change background colours for an image interaction and a card wrapper?
Thanks,
P

Here is my public share link: LINK
(how to access public share link)

2

Hey Patricia, here’s a step-by-step guide. Let me know if this helps!

1. Changing Background Colors of a Card Wrapper:

  1. Select the Card Wrapper Element: Navigate to the Webflow Designer, and click on the card wrapper you want to change the background color of.
  2. Open the Style Panel: This panel is on the right side of your screen and looks like a paintbrush icon.
  3. Navigate to the Background Section: This is typically found midway down the Style Panel. It has an icon that looks like a small paint bucket.
  4. Choose Your Color: You can add a solid color, gradient, image, or even a video as a background. For a solid color, click on the color box and select the desired color from the color picker or input your hex code.

2. Changing Background Colors based on an Image Interaction:

If you want the background color of an element (like a card) to change when an image inside it is interacted with (e.g., hovered over), follow these steps:

  1. Select the Image Element: In the Webflow Designer, click on the image that will trigger the interaction.
  2. Open the Interactions Panel: This is on the right side, and looks like a lightning bolt icon.
  3. Create a New Interaction: Click on the “+” button to add a new interaction. Choose an interaction type, like “Element Trigger”.
  4. Choose the Trigger: For our purpose, “Mouse Hover” might be appropriate. This means the interaction will happen when the mouse hovers over the image.
  5. Define the Animation:
  • Click on “+ Action” and select “Start an Animation”.
  • Click on “+ Animation” to create a new animation.
  • With the animation panel open, go back to the Navigator panel and select the card wrapper (or the element whose background you want to change).
  • Return to the Animation panel, and under the “Style” section, choose the “Background Color” property and set the desired color for the hover state.
  • Optionally, add another step to define the background color for the “Hover Out” state (i.e., what the background color should return to when the mouse is no longer hovering over the image).
  1. Save: Once you’ve defined the animation, save it.

Now, when you preview your site and hover over the image, the card wrapper’s background color should change as per your animation.

Remember to always test your interactions to ensure they’re working as expected and refine as necessary for the best user experience.