I'm in the process of creating a webpage that will feature a .png image of a computer with a transparent screen. Upon this image, I plan to overlay a screenshot of a website and allow users to scroll through it as if they were navigating a real webpage.
Here's an example of what I'm trying to achieve, albeit with a scrollbar instead of automatic scrolling:
While I have managed to make some progress, I'm facing an issue where I can only scroll through the elongated website image (#instagram) when I inspect the page. I suspect that the #laptop image is somehow obstructing the #instagram image.
#container {
position: relative;
top: 0;
left: 0;
}
#instagram {
z-index: 1;
width: auto;
height: 400px;
border-radius: 5px;
overflow: scroll;
position: absolute;
top: 0px;
left: 0px;
}
#laptop {
z-index: 2;
width: auto;
height: auto;
position: relative;
top: 0;
left: 0;
}