Issue hover: doesn’t scale properly

I have an issue with hover. I want my page to show an image, and when you hover over, it changes to a color and text on top. So far, so good. The problem is that I can’t seem to get the hover to fit the same container as the images. When the browser window gets smaller, the image also gets smaller. But the image it should show on hover, doesn’t seem to follow the same rules. It works when the browser window is big, but looks strange when it gets smaller. You can see on the webpage I have tried several things:
I have also tried using text in css, but it won’t scale along with the original photo. The problem then is that I have a max-width of the container, because I don’t want it to be bigger than a certain size. I tried using “font-size: 4vw”, but then it doesn’t stop scaling, and gets to big. Appreciate all the help I can get!

I dont fully understand your question but this helped me when trying to scale font-sizes with different viewport sizes.

Thank you, will check this out!