How to handle hover on iOS devices

  • On a desktop PC you can hover over a portfolio item to reveal its name and details. However, on iOS devices, if you click on a portfolio item it does both: reveal the name and details (like on hover) and then go straight through to the portfolio item page (without having to click again).

    This is not a desired behaviour, as people can’t really see what item they’re opening. It would be better to let people tap once on iPad or iPhone to reveal the items name and then tap again, to open the link.

    Without this, Visual Portfolio is almost useless on iOS devices, as you cannot get a real overview over the projects listed. Any idea how to fix this?

Viewing 1 replies (of 1 total)
  • Plugin Author nK

    (@nko)

    Hi.

    I’m not sure that such behavior will be intuitive to use for all users and all projects (first tap – show overlay, second tap – open page). Because of it, there is no built-in solution in the plugin. You can make it by yourself with custom JS.

    Also, there is another solution – show overlay on small screens with custom CSS (that is also not perfect for all). Example for Fade effect:

    
@media (max-width: 600px) {
    .vp-portfolio__items-style-fade .vp-portfolio__item .vp-portfolio__item-overlay {
        opacity: 1;
    }
    .vp-portfolio__items-style-fade .vp-portfolio__item .vp-portfolio__item-meta {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

    You can make it better, just need to add more styles.

    Regards, nK.

Viewing 1 replies (of 1 total)
  • The topic ‘How to handle hover on iOS devices’ is closed to new replies.