2 dfferent animations on a hover

Design help General
1

Hi,

I’m having a bit of trouble figuring out how to have 2 different animations when you hover over something.

At the moment, when you hover over the images you get a text overlay appear. What I want to happen is have the coloured section fade in as it does now and the text move in from the left to the right as well as fade in.

Is this possible?

https://preview.webflow.com/preview/mw-design?preview=fc1e9332a6d9d5c59bf7cc58756eefa8

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

2

“Cover Text” and “Service text”

  • Transform -50vw

“Cover Hover” (interaction)

  • Add New Hover trigger

    • Affect Different Elements
      • “Cover Text”
      • Limit to nested elements
    • Hover Over
      • Move to Origin
    • Hover Over
      • Move X (Left) -50vw

  • Add New Hover trigger

    • Affect Different Elements
      • “Service text”
      • Limit to nested elements
    • Hover Over
      • Move to Origin
    • Hover Over
      • Move X (Left) -50vw
3

Awesome! Thanks a lot, works perfectly :slight_smile: