How do I make both the title and the icon background turn green when I hover over the box on the 3 petrol goals page in Webflow?

To make both the title and the icon background turn green when hovering over the box on the 3 petrol goals page in Webflow, you can follow these steps:

1. Open up your Webflow project and navigate to the page where the box resides.
2. Identify the class or classes assigned to the box element that you want to modify.
3. Add a new class to target the specific elements you want to change on hover. You can do this by clicking on the "+" button next to the class name in the Styles panel.
4. Once you've created the new class, you can modify the styles for the title and the icon background to achieve the desired effect. Here's how you can do it:

• For the title:

  • Select the title element within the box.
  • In the Styles panel, navigate to the Hover state.
  • Change the font color to green using the color picker or by manually entering a hex code (e.g., #00FF00).

• For the icon background:

  • Select the icon element within the box.
  • If the icon has a background color defined through a class or style, you can modify it directly in the Hover state. If it doesn't, you may need to add a new class to the icon element so that you can style it.
  • In the Styles panel, navigate to the Hover state.
  • Change the background color to green using the color picker or by manually entering a hex code (e.g., #00FF00).

1. Save your changes and preview the page to see the hover effect in action. When you hover over the box, both the title and the icon background should turn green.

By following these steps, you can easily customize the hover effect for the title and icon background on the 3 petrol goals page in Webflow.

Additional questions:

1. How do I add hover effects to elements in Webflow?
2. Can I create custom animations on hover in Webflow?
3. What other styling options can I modify on hover in Webflow?