Regarding After hover effect on mobile website

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

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.