Show/Hide Interaction for Displaying Call Outs

Design help Animations & Interactions
1

I’m trying to design elements where when the user clicks on an icon, a hidden text element appears with more information. I’ve built one after watching the tutorial on Webflow.

https://preview.webflow.com/preview/bokonlinebankingv2?preview=3e438426de158edcf924dcb760603024

The scope is to have 2-3 of these display icons on each image. It’s walking people through the functions of different screens.

For example, if they click on the magnifying glass (see below) …

1147×668 205 KB

… the drop down box appears (below)

1071×665 208 KB

Question/Problem:
I set the elements (magnifying glass and text box) with relative position. Not sure if this was the best way, but couldn’t figure out how else to get the icons where I needed them. The problem I see is that as the screen “responds” these elements are going to move and not be relevant. Is there a better method for accomplishing this?

I looked through this forum for similar adaptions but didn’t find any.

Hoping one of your design/Webflow gurus can provide a best practice and info on how to accomplish it.

Thanks in advance.

Greer

2

I can’t see any magnifying icon following your link… did your remove them?

The thing is you have to set their position for each breakpoint.

3

Yes, I removed them. I just couldn’t figure it out and hadn’t heard back from anyone on solutions. Thanks for the reply.

4

Yep I guess it’s slower on weekends (:
good that you’ve found a workaround.

5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.