CSS Hover Not Centering - html

Question

I am creating a div which will enclose a users name and when they hover over a profile image then it will display the name over the image, when I am doing this it does not center the div over the image solely which will be causing a problem when styling the website.
My CSS is below:
.miniProfileImage {
border-radius: 100%;
border: 3px dashed #28A745;
width: 100%;
max-width: 200px;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
opacity: 1;
display: block;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.img-container {
position: relative;
width: 50%;
}
.img-container:hover .miniProfileImage {
opacity: 0.3;
}
.img-container:hover .middle {
opacity: 1;
}
.middleText {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
A sample HTML mark-up can be seen here:
<div class='img-container'>
<img class='miniProfileImage' src='http://via.placeholder.com/500x500'>
<div class='middle'>
<p class='middleText'>Some Name</p>
</div>
</div>
I have also created a JS Fiddle to represent what is happening
.miniProfileImage {
border-radius: 100%;
border: 3px dashed #28A745;
width: 100%;
max-width: 200px;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
opacity: 1;
display: block;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.img-container {
position: relative;
width: 50%;
}
.img-container:hover .miniProfileImage {
opacity: 0.3;
}
.img-container:hover .middle {
opacity: 1;
}
.middleText {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
<div class='img-container'>
<img class='miniProfileImage' src='http://via.placeholder.com/500x500'>
<div class='middle'>
<p class='middleText'>Some Name</p>
</div>
</div>
Thanks

Answer 1

That's because your surrounding <div class='img-container'> has a width that is wider than the image.
If you want the div to have the same size as the image, you can do the following:
.img-container {
position: relative;
display: inline-block;
}
.miniProfileImage {
border-radius: 100%;
border: 3px dashed #28A745;
width: 100%;
max-width: 200px;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
opacity: 1;
display: block;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.img-container {
position: relative;
display: inline-block;
}
.img-container:hover .miniProfileImage {
opacity: 0.3;
}
.img-container:hover .middle {
opacity: 1;
}
.middleText {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
<div class='img-container'>
<img class='miniProfileImage' src='http://via.placeholder.com/500x500'>
<div class='middle'>
<p class='middleText'>Some Name</p>
</div>
</div>

Answer 2

please correct the CSS like this
.img-container {
position: relative;
width: 100%;
max-width: 210px;
}
and .middle {white-space:nowrap} you can give .miniProfileImage {max-width:100%} to image