Positioning a GIF over an image using Javascript

user_16245764 0
Viewed 49

This is my first post here so I hope I do it right.

I am currently building a portfolio website which has long panoramic photographs which are placed inside scrollable divs (www.edentan.co.uk/portfolio.html). I am trying to overlay a GIF over one of these photographs in an exact position on the photo. I think I will have to use JS because when I use CSS the positioning will only allow me to position it a number of pixels left/right of the screen.

var imageFive = document.getElementById("Img5").style.left = 500%

This code above works but the positioning will vary depending on the screen resolution. What I am trying to achieve is using .style.left in the same way as I have scrolled left with the script below.

var imageThree = document.getElementById('Img3')
var widthImg3 = imageThree.clientWidth;
const Img3El = document.querySelector('#Div3');
Img3El.scrollLeft = widthImg3/1.26;

So to summarise I would like to style.left Img5 by a fraction of Img3 but I can't quite work out how to write the script.

Thank you, and I hope this post made enough sense for you guys to help me <3.

css html jquery javascript
1 Answers

First off, change "var" to "let" because using var is a bad practice.

Second off, don't use javascript if you can, go to your HTML file and use the style tag in the header. Using CSS for this is a lot easier than javascript. Next, do position:absolute and just position the gif over the image using VW or VH. That should work for any viewport. For example

#img3 {
// whatever styling you want for img 3
}

#img5 {
     position : absolute;
     left : whatever vw
     top : whatever vh
}
user_160171500
Related