So I have very limited webflow experience and can’t figure out how best to achieve multiple text hover reveals over a single image (not actual image being used):
What i’d like to achieve is when you hover over each point of the body you get a text reveal in the centre of the page with some information etc and then a close button - I had a look at the suggested topics such as plotting on a map which at first I thought would be a perfect base to help me but unfortunately not.
As I mentioned i’m really not very experienced with webflow other than basic layout etc so any help in solving this will be hugely appreciated. Can anyone point me in the direction of a tutorial with a similar outcome?
I haven’t started building this section on the intended site yet so is it still worth posting a read-only link?
Craft the section where your image stands, put your image inside of a DIV and make that div position:relative.
Somewhere else, craft an element inside of a div called spotor whatever else you want to name it.This div will be one entire “hint” with content and interaction.
So if I take your example this div will contain another div for the hint image (the red spot) then another div for text, and the text will be hidden, and when hovering the red dot, the text will show up. Try to achieve that using Interaction Legacy (1.0) as it’s easier to reuse IX1.0 interactions.
When the element is doen, copy this entire div inside of the div containing the image. Give it position:absolutethen give it a combo class spot1for the first spot.
Now use the position sbsolute values to place the spotdiv where you want.
Once done, copy and paste it to duplicate it, remove the combo class, create a new one called spot2, place it, edit the text to reflect your second hint…
Thanks so much Vincent, I’ll have time to get around to this and follow your instructions in the next couple of days, hopefully with my inexperience I won’t run into any issues!
Thanks again for the advice above - I’ve left this section till pretty much the end so that I can dedicate the rest of my time to getting it right and understanding your guidance.
Could I ask your advice was based on the hint image (red spot) being created in webflow or does this allow for an invisible hint to be placed over a red spot which is already part of the uploaded image? If you wouldn’t mind taking a look at the sites read-only link if you have a bit of time that would be amazing
