Sorry if this is not the right way to do it, please feel free to suggest other solutions. I don't care what the text or the blindfolding element is as long as it servers the purpose. Maybe it is possible to do this with an svg but it is way too advanced for me.
I am trying to create a page showing an image with a certain area covered so that the reader can't see it. Here is my code so far. Not sure how to calculate/recalculate the position of that element based on the new position and size of the picture when the browser window resizes

Updated fiddle with the solution as suggested by @quenting
https://jsfiddle.net/xay5u78s/1/

CodePudding user response：

Absolutely positioned elements are positioned with respect to the edges of the nearest ancestor element that is positioned (meaning "Has position: anything-but-static").

So set the containing div to position: relative and give it the same dimensions as the image.