Make a circular overlay on hover image

Question

I have the following image and I want to display a circular overlay when hovering on it. Now it is oval shape. How can I do it ?

.container {
  position: relative;
  width: 50%;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  opacity: 0.5;
  transition: .5s ease;
  background-color: rgb(186, 68, 0);
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<div class="container">
  <img src="../assets/images/pathologiessmall.jpeg" width="130" height="130" class="image" />
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

This is the code. Is the issue with the text or the overlay. For me, it's obviously the overlay. I have to write it here because else I cannot post because this textbox doesn't allow me to post. So I think it is regrettable that I have to tell my life story because of stack overflow rules.

Answer 1

I think this is what you want to do: (I only added size in px in your container's CSS to match your image size)

.container {
  position: relative;
  width: 130px;   /* Modified */
  height: 130px;  /* Added */
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  opacity: 0.5;
  transition: .5s ease;
  background-color: rgb(186, 68, 0);
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<div class="container">
  <img src="../assets/images/pathologiessmall.jpeg" width="130" height="130" class="image" />
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

Answer 2

Thanks all.

@Takit Isy, I've played with your answer and had to add left : 10% on overlay. I'll see if it works if I add more images, but the idea is good. Thanks again !

.container {
  position: relative;
  width: 150px;   /* Modified */
  height: 130px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10%;
  right: 0;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  opacity: 0.5;
  transition: .5s ease;
  background-color: rgb(186, 68, 0);
}

Answer 3

You should set proportional width and height to with 1:1 proportion
1) you can set up manually width and height equal to image

2) you can set width equal to height like this

.overlay {
  height: 100%;
  width: height: calc(width);
}