I need to be able to show different information when users mouse over parts of the attached image. What’s the best way to achieve that effect? Thanks!
1 Like
Hey Clark,
I am thinking of keeping this simple.
You could try creating a container that will hold the image (position relative), and then you can create smaller divs (positioned absolute) that will hold the info of the circle, line, and description (these divs will be in the initial container as well.)
You can then move those smaller divs over parts of the image and keep them hidden. Then you could reveal the info when a user hovers over that area/div (using some on-hover interactions).
2 Likes
Thanks, Riley. I’ll try that out!
-Clark
2 Likes
So I tried laying out the image just to see if I could get alignment right, and it looks good until I resize the window a bit. What am I doing wrong as far as positioning? Each div is it’s own class and contains a link block which contains the image. The container is set to relative and the internal divs are all set to absolute.
1 Like
Do you have a share link?
So the container that the skeleton background image is in should be relative. You’ll need to give it a set height (possibly 100vh) or something.
Also, I would make a custom container rather than using the Webflow one. The Webflow container element has specific widths for each viewport which are going to affect your absolute positioned items. You might be okay by just having the custom container be a max-width of 940px;
Hopefully that helps a bit more.
Thanks a bunch! I’ll get to fiddlin’.
Hey Riley, thanks for the help. Here’s what I ended up with. https://valley-ortho-anatomy.webflow.io/
3 Likes
Glad I could help! It’s looking good.