Hover behaviour on touch devices

Design help General
1

Hello everybody,
I’m using webflow because I’ve never written a line of code in my life. And until now, the Webflow-Solution has proofed to be «the future». I’m building our website right now and I’m stuck with the following problem:

I have a very simple hover-effect through an interaction. See how this is constructed:

In it’s initial state, the image is shown:

When I hover over it, the opacity of the «HoverLinkBlock» changes to 100% with a transition of 500ms.
This all works perfectly on non-touch devices, because what I intend to do is to simply show the project-information related to the image when the user hovers over it. See here:

form here – again on non-touch devices – the user can click on the square and is taken to another page with the project details and more images. That’s why I’m using a LinkBlock in my «construction».

On touch devices, the user is taken directly to the project details page; the hover is not shown.
Is there a way to do the following on touch devices: when clicking/touching, the hover is shown and stays visible. To go to the project detail page, the user has to click a second time.

Thanks in advance,
reto

2

I don’t see how to make it work for both computers and touch devices.

However, you could maybe have two separate elements, one that displays for computers, with hover and click, one that displays for devices, with another interaction involving two clicks.

That said, reproducing hover for touch devices this way is pretty confusing. Unless you disclose the actions after the clicks, with for example a “?” for the first state and a “Visit” button for the second.

3

Thanks Vincent for having looked into that. As you’ve mentioned, maybe I can «trick» around something with interactions. Since I’m a total beginner in interactions, I’ll be using my playground. In case I figure it out, I’ll make the link public.