How to implement easter eggs

[milkshaken]

Hello everyone.

I am making a rather "experimental" site (made all the more so by my initial ignorance of how to go about it), where I am to deliver a fair amount of the content through understated "hidden" links.

I would thus like to link one particular region of an image to another page in my site, and do this many times over within the site.

I have started to play around with this by putting a button over the region I wan to be my link "hotspot".
However, the position of my button changes from the precise region of my image that I want the link to be, on the preview and when resizing the browser window.
Which is to be expected I'm sure.
I have been using absolute positioning with % or vw/vh values.
Is there any way of making the link block/button always stay in exactly the same spot in regards to its parent element even while the later resizes to remain responsive?

Here is my link:
https://preview.webflow.com/preview/milkshaken?preview=27d56550f7e2947d4e46dc82a46efe3c

The part Im working on is within SECTION 03/ SLIDER DIV BLOCK/ SLIDER/ MASK/ Slide 2/ IMAGE DIV BLOCK/ COLOUR BLOCK/ WATERBOMB BUTTON

Is there any better way of achieving this?
Or good ways of implementing easter eggs in general?

I am completely new to this but very fascinated by the process, so I would appreciate any pointers anyone has.

Thank you very much in advance.

[DharmaNode]

Do you mean like this?
http://quick.as/m5B8T6Vq7

[makloon]

DharmaNode's example is completely spot on.
In order for absolute positioning to work, make sure the parent element has position: relative set on it.

[milkshaken]

Thank you so very much for taking the time to do this.
Also, squirrels?

Yes much like this.
However, what if we wanted the red car to be our hidden link (in your example)?
Meaning that, it is the positioning of the easter egg block that we want to control, and keep it constant in regards to the image that contains it, so that it is always on top of the red car...
I hope I am asking in a way that makes sense?

As to what makloon said, I have set the position of the parent element (COLOUR BLOCK) to relative, but the link block still does not quite behave as desired when I'm resizing the browser window.
I am trying to capture that pink octagonal shape within my link block.

I may well be missing something, but unfortunately I can't tell what it is.

[milkshaken]

Gah.
So, it finally occurred to me to set the position of my link block in VH, and it works like a charm.
(As the link is inside a slider that resizes to 100% of the height of a containing div block)
It was so simple in the end but it still hurt my little head dancing around to figure it out.

Thank you so very much for your pointers, it was thanks to that that I was able to reach the solution in the end.
I am very grateful

[system]

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