How does 'appear on hover' work on mobile

Design help Animations & Interactions
1

https://preview.webflow.com/preview/echo-geo?preview=7a9097516c0a6f5b1a5b8ca1e711544e

Hi,

I have text appear on hover in the team section of this page http://echo-geo.webflow.io/home-new However, not sure how this will work on mobile? Do I need to replace the whole section and replace hover with click or is there a more straightforward way for this to work?

Thanks

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

2

@sparky It looks fine in mobile to me maybe add a little more space between text. touch and tap works fine also

3

Thanks @Poliigon. That’s interesting. So when you tap the name of the team member their photo is replaced by text? Nothing happens for me.

4

@sparky Yes I tested it on apple android & windows what are you viewing it on?

5

I’m looking on an old iPhone 4. I think the client (who brought this to my attention) is using something similar with the same result.

6

@sparky Ok I get what your saying lol I haven’t had enough coffee… phones are not hover-able, you can only touch our tap on phones. if you tap the icon the text shows. you can add a style in mobile view that is like a link click to view more.

7

@sparky you could do a hover state for the image itself on mobile in css where it either fades or gets darker if when scrolling over it like a hyper link.

8

That’s really the key issue - tap to show text isn’t working for me on an old iPhone. Sounds like it’s working for you though. Can I just double check what you are clicking to get the text? If you scroll down to the Team section you will see circular team photos with their name and job title beneath. When I clicked on the photos it clicked through to their LinkedIn profile. It should show their profile text (see how it works at desktop).

I have just removed the Linkedin link from the photos but when I tap the photo nothing happens.

Really need to figure out a way to make this work on all phones.

9

@sparky my mom inlaw has a iphone6 yes it is showing behind the image. so you can control this by upgrading your browser for the iphone because it is a bit outdated. another option is you can actually do is add a css fallback.

10

@sparky to give you an example…

whatever you want your breakpoints for mobile

@media (max-width: 657px) {
.your-text a{
 display: none;
} 
.your-text a:hover{
display: block;
} 

.your-pic a {
display: block;
}
.your-pic a:hover {
 display: none;
}
}
11

Thanks very much! Will look into it…

1 Like
12

@sparky not a problem glad to help.