Blur only outside of image

How can I accomplish something like this? I want to blur the outside of the image. But it scrolls across the screen while enlarging and the image gets blurred as it expands into the gradient part. Here is the link to the site - https://www.functionhealth.com/

I added a Div with an image, added a radius. Then added a div with a gradient and some transparency. I added another div that i was hoping would remove the transparency that its nested over, but dont think my logic is right. Any help would be greatly appreciated.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)