Over image text that only appears when hovering over the image - html

Question

I got some simple code to make text appear when I hover over an image, the problem I run into is that the hover hitbox is bigger than the image. I looked at my CSS and tried a lot but I can't find the right bit of code that I need to change.
CSS:
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 30%;
height: 183px;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.over_image_text {
background-color: #6552c7;
color: white;
font-size: 16px;
padding: 16px 32px;
}
html:
<div class='container'>
<img class="projects" src="../../images/spaceinvaders.jpg" alt="spaceinvaders"></a>
<div class="middle">
<div class="over_image_text">Read more about this project</div>
</div>
</div>

Answer 1

The code you are looking for is this class in your CSS:
.over_image_text {
background-color: #6552c7;
color: white;
font-size: 16px;
padding: 16px 32px;
}
The part which is interesting for you is the last line padding: 16px 32px;.
Try decreasing the pixel values to the size which would fit for you. If that's not enough, then you can also decrease the font-size here.