Image positioning

Hi all,

I am making a website and there is a church and a crow.

I want the crow to be pinned on the church in whatever resolution, however I have tried different solutions and still no luck, the crow moves with the change of resolution.

Could anyone help me please?


Here is my public share link: https://preview.webflow.com/preview/s7ns?utm_medium=preview_link&utm_source=designer&utm_content=s7ns&preview=0060f6a853c8ce8bed285ce77836a9c5&workflow=preview

Can you let me know what are you trying to achieve here? I mean do you want to animate/move the crow later. I mean why do you want it separate?

You will need to have you main image and crow both in divs.

  1. Main img to relative.
  2. Crow img to absolute (Higher z index)

Make any tweaks to media as you see fit.
example:
@media screen and (max-width:478px) {
.parent-img-crow {
top: 2%; /Your value/
}
}

All depends on how your document has been set up though. Screen attached.

I want something like a pin on a map. I can also insert a link into the pin. Something like this. https://global.discourse-cdn.com/webflow1/optimized/3X/2/b/2bb3c3de458b88bbaaf53746c2e9da0df098220f_2_690x432.gif

It doesn’t work, but I found a similar solution:

https://discourse.webflow.com/t/image-with-hotspot-fixed-size/69968/4

However, it was 4 years ago and I tried his method but it doesnt seem working out…

It does work as you can see in my image attached. Good luck.