Responsive Image Size and Position

Design help Layout & Design
1

Hi everyone!

I am trying to ensure an image stays in the same relative position with the same relative size when the browser window is re-sized. The white image should cover the background video and fit the shape of the transparent box every time.

The issue I’m having right now is that the white image shifts around depending on the browser size and it does not always cover the transparent window. Can someone please help me figure out the correct size and position treatment for the white image?

Note: The white image only appears on hover. Any and all advice is appreciated! :slight_smile:

Here is my site Read-Only:
Webflow - Video Landing Page

2

Why not make your image mask and the overlay the identical size and give them the same class and set them to absolute positioning and put the parent element at relative positioning. This will make them be in the exact same place.