Hover over effect not working on mobile

Design help Animations & Interactions
1

Hi,

I’m looking for some help understanding why the hover over effect for the “03. Green Shift” image works on desktop but not on mobile (tested on iPhone 7 version 12.1.4, Chrome version 73.0.3683.68). It should start off with “Green Shift” then on hover it should disappear and show “Helping you reach new horizons”.

Thanks in advance,
Philipp

Here is my public share link: https://preview.webflow.com/preview/philippmarc?utm_medium=preview_link&utm_source=designer&utm_content=philippmarc&preview=b87cf49600a2fe32c61969a6f3b7b257&mode=preview

2

Hey Philipp,

You had a hover state being triggered on your paragraph text, which I imagine was conflicting with the interaction you had created. Also a tip, make sure you name your classes so that you don’t lose track of your elements in the future.

3

Hi @Hunter_Reynolds, thanks for helping out. I tried to make the changes you suggested, but I am still not able to get it to work on mobile. It works perfectly fine in the dashboard mobile view and also on my laptop when published on Chrome.

One thing I noticed on mobile is, if I click into Green Shift, then go back to the main landing page, the text is showing and not the logo (the default is Green Shift logo, then text when hovering over). I am not sure if this is a clue for anything, but definitely odd as well.