How to fix the overlay over the image using HTML and CSS

Question

I have been working on code to tag images. The problem I face with the code is that when I start to tag the image, an overlay appears over the image, but the position of the overlay does not sit exactly over the image.

I tried setting up the position as relative and absolute but still the problem occurs.

I have attached the Jfiddle below:

jsfiddle.net

If you see the code, the image is present inside the imgarea and CSS property is:

 .imagearea {
    display: flex;
    flex-direction: column;
    float: left;
    width: 35%;
    position: absolute;
  }

And in the image-select-area -overlay :

 .select-areas-overlay {
  background-color: #000;
  overflow: hidden;
  position: absolute;
  }

The picture below shows the problem I am facing

If you see the picture, the overlay(blur overlay) is not exactly over the image and also it puts the image to the extreme left of the screen.

Can Someone help me with this problem to fix this position of the image and the overlay over it.