Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS 3D card flip – how to properly handle touch support?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #178523
    Ilan Firsov
    Participant

    I have a page with these “3D cards” which when hovered flip around to reveal more info about a product and when clicked they take you to full product page.
    It works perfectly fine with the mouse, but the problem starts when you use a touch device. When clicked it flips for 1 second and then takes me to the product page.
    I want it to essentialy require 2 clicks on touch devices, one to flip to the description and another to go to the linked page. Any ideas how I can achieve this?
    I remember seeing it happen sometimes when a link has a :hover state, but here this does not happen. Maybe there is a way to manually trigger this behaviour?

    Here is the pen:
    http://codepen.io/ilanfir/pen/gjoKl

    #178527
    Paulie_D
    Member
    #178572
    Ilan Firsov
    Participant

    @Soronbe yes something like that though only for touch. I want mouse to work as it is now.


    @nkrisc
    You might be right. I currently have a ‘click for more info’ text always showing on the description. Will this be enough or should I think about some other way to handle this?

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.