I am working with an iPad frame and trying to implement a feature where a larger image scrolls behind it as the user scrolls down the page. Although my CSS is more complex than the example provided in this link, I am struggling to get even that basic functionality to work.
On my actual webpage, I want the scrolling behavior to be normal until the user reaches the large image behind the iPad frame. At that point, I'd like the scroll action to affect the "page content" within the image. Once the content of the image ends, I want users to continue scrolling normally.
After updating the fiddle to better reflect what I'm aiming for, I realize that when I position the iPad frame on top of the image, the content doesn't scroll properly. However, placing the frame beneath the image causes issues with resizing and covering other elements on the page. Any suggestions on how to achieve this effect seamlessly? Thank you to Felk for pointing me in the right direction.
Included below is a visual representation of how I intend to apply this concept:
Example HTML:
<div class="container">
<img class="frame" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
<div class="inner">
<img src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png" />
</div>
</div>
Example CSS:
.container {
width: 70%;
position: relative;
}
.frame {
/* position: absolute; */
width: 100%;
z-index: 100;
}
.inner {
height: 558px;
overflow: scroll;
position: absolute;
top: 14%;
left: 38px;
}
.inner img {
width: 92%;
z-index: -100;
}