Starter test: click picture to see text, click again to see picture

Design help General
1

hi

As a starter test, I would like to have a grid, and in each grid square there is a picture that when clicked reveals the related text in the same position, and when clicked again goes back to the picture.

Something close would be good!

Currently each grid entry has the same picture, and the first entry has a link to a section further down the page.

Thanks

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Well, the way is to use “on click” interaction which have two clicks to set your actions. Div parent would be a trigger. Inside it there will be two children - one or both should be absolutely positioned. One of them will have its opacity at 0 initially. On clicking the parent div the visible child will have its opacity to go to 0, while invisible one will have its opacity to go to 100. On second click same but in reverse.

3

Thanks for your insight and will now go off to investigate click interactions to build up some experience. The way I read it there are three layers, with the top one as the click layer and the other two with the image and words to fade in and out.

Obviously when I got the idea to try this out as an exercise to learn stuff I had no idea if it was going to be easy or difficult…

The one downside of a point and click environment might be that there is currently no source code to describe this setup.

Thanks!

4

So, in the same project, have set up page two “stuff” with two Divs, first with button, second with a text element to be hidden. Currently have it hidden with Display=None.

Example 3 here https://interactions.webflow.com/ is roughly what I’m looking for as a first step.

The idea now is to try to get the button to make the hiddenText appear.

It’s a start.

Cheers

p.s. on my screen not obvious that there is more to see on the right hand side interactions screen e.g. opacity. On clicking the button, have managed to make the text in the text box disappear. Blue background is still there, ready for next challenge. Note sure if the text can be made to appear in a reversal or some other technique is needed.

Progress!

1 Like