iPad/iPhone alternative for hover states

Question

I've recently updated my personal portfolio with some CSS3 and jQuery magic. I'm extremely pleased with the results and yes, it's fully responsive. But i have an issue. I've structured my portfolio items so that initially each item box has an overlay on it, when the user hovers over an item, the overlay shoots up and reveals content. This works well on a browser with a mouse.

Now, on an iPhone/iPad, visually the site looks great but obviously the user has no mouse and has no user-friendly hovering state. What is the most user-experienced conventional way to gracefully supply an alternative to "hover to reveal content".

Also, before someone says it, I am aware that the hover effects I have on my site serve no functionality but they just look nice. See here

Answer 1

There is no hover equivalent on iOS devices. The most conventional gesture to interact with content is 'tap'. You could have the content boxes open a pop-up or overlay on tap (which would work better on iPad than iPhone). Using other gestures which have no strong established convention could just confuse users. But it might just be more graceful and usable to put all of the content in plain sight.

Answer 2

Maintaining your current design...

As mentioned there isn't a hover behaviour equivalent on iOS devices. Even if you implemented a 'follow the finger' behaviour, most users will probably be moving their finger off the screen, moving to the target and then touching the screen again.

One approach would be to have small page curls in the bottom corners. This lets users know that there is more information available, and uses a real-world and existing iOS convention. People could peak at the content or fully open it up, and it would stay in place when they move on to the other boxes.

Answer 3

Single click (finger tap) is the most appropriate hover alternative on touch devices.

Answer 4

As stated, 'tap' is the typical interaction. If your goal is primarily to have this working on iOS, then I'd suggest a tap event and then use the card-flip style to show the text on the 'back' of the card. It's admittedly used a lot, but I'd say it's becoming a standard way to handle 'meta' information on elements on an iOS touch device.

Alternatively, you could just leave it as-is and trigger the text on one tap, then hide it on the next.

Answer 5

I believe one way to enable "hover" on a touchscreen would be with a sequential double touch. By this, I mean touch and hold the screen on an inactive part (e.g., not on a link) and then 'tap' (and release) the area with the hover info while maintaining the first touch. The hover info remains visible until the first touch is released.

Answer 6

If a user using an iOS device comes across a link with a :hover CSS tag the process is as follows:

1. First tap: the :hover CSS is activated
2. Second tap: the link address is followed

Reference SO question and a live demo.

Answer 7

Adding cursor: pointer to the element that has hover styling, enables the state for iOS and keeps the functionality for the others. But you might want to use Modernizr to add that declaration only for touch devices, so you don't get a false link in case you're not using an <a> tag.

.element {
  cursor: pointer;
}

.element:hover {
  /* your custom styles */
}