Scrollable image below a PNG... is this possible?

Design help Animations & Interactions
1

Hey guys!

I’m building my portfolio website and I would like to add a section where I can show my web design projects. I would like to have a PNG with the outline of a laptop and a long image underneath where users can scroll and see all the content of the webpage. I made a test in Figma so you can see what I’m talking about: Scrollable Mockup Test - YouTube

Is this possible? Any tips would be appreciated. Thank you! :slight_smile:

Here is my public share link: Webflow - Lissy Gonzalez | Portfolio

3

Thought I had an example on another site but it utilizes a background video vs. using a long scrollable static image.
Here’s a quick sample of what you’re looking for:

https://preview.webflow.com/preview/scrolling-masked-image?utm_medium=preview_link&utm_source=dashboard&utm_content=scrolling-masked-image&preview=fcd99aa9d0e0452ebb127200bad829fe&workflow=preview

A parent div will be set to position = relative

One element inside of that parent will be set to:
• position = Absolute
• z-index = 3
• use a set pixel dimension for the width and height.
• overflow = auto
• drop your long website image inside

Add the laptop image inside of the parent div and set it to:
• position = Absolute
• z-index = 2
• give it fixed pixel sizing

You’ll have to play around with the fixed pixel sizing to make the elements line up correctly.