Jump to content

Regarding After hover effect on mobile website

Recommended Posts

Site URL: https://yasutokimura.com/portfolio-2

Hi,

On my portfolio website I applied “after hover” effect on few of the photos.

This function works perfectly on desktop, and the preview of mobile website looks perfect too. 

For some reason when it comes to the actual mobile screen, the after hover effect doesn’t work.

I’m wondering how to make it work, and I would appreciate your advice.

Regards

Yasuto

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

19 hours ago, yasuu said:

For some reason when it comes to the actual mobile screen, the after hover effect doesn’t work.

Mobile devices don't have "hover".

The mobile preview only works because you have a pointing device on your computer (a mouse or a trackpad) which a real mobile device does not have.

Personally, I recommend avoiding hover states unless a large proportion of your audience will be browsing from a computer. If a reasonable proportion of your audience will be using mobile devices (it's typically at least  50%) then it is best to avoid using hover and adapt your design to show the information instead of hiding it. I should mention that on some touch devices, if an element has a hover state, it may require the user to tap it twice to activate it, which is a very poor experience.

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.