Hover States on Touch Device, Doesn't Work as a Link

[Jeremy Englert]

Demo: http://www.mcfaddengavender.net/dev/aquadopa/ambassadors/

When you hover over the photos, you’ll notice the hover effect that is in place. It works great on desktop devices, however, the link is not clickable on touch devices.

What is the best workaround for this situation?

Here is a (rough) CodePen of the project:
http://codepen.io/JeremyE/pen/cAmCp

[Pithdog]

I seemed to get it working here: http://codepen.io/anon/pen/FiIok

What I did was make the link position absolute, top/right/left/bottom 0 to take up the full width/height and then put the h3 within that as either position absolute or relative.

You could do this on hover, or have the link always the full width and height.

Testing it on my iPhone it seemed to work, but codepen on my phone is always dodgy.

[Author]

Posts