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?
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.
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
