S7NS
(S7NS)
June 19, 2022, 5:28am
1
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
abirana
(Abi Rana | Creative Web Developer)
June 19, 2022, 12:12pm
2
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.
Main img to relative.
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.
S7NS
(S7NS)
June 23, 2022, 11:22am
4
S7NS
(S7NS)
June 23, 2022, 11:24am
5
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.