I'm seeking a solution for my image overlay text shifting issue. Currently, when I hover my mouse over the image, the overlaid text moves to the left by 69 pixels instead of staying directly above the image. How can I rectify this problem?
https://i.sstatic.net/ZVeJg.png
HTML
<div class="row">
<div class="container col-lg-3">
<img src="Images/Coding.jpg" alt="" class="image">
<div class="description">
<h6 class="titles">
Coding
</h6>
<br>
<i class="far fa-keyboard fa-2x"></i>
<br>
<br>
<p>
Projects | Learning | Design
</p>
</div>
<div class="overlay">
<div class="text">
<h5>
Take a peak at my offers, current projects, and qualifications
</h5>
<br>
<a class="btn btn-outline-light btn-sm" href="coder.html" role="button">
Explore more
</a>
</div>
</div>
</div>
</div>
CSS
.container {
position: relative;
width: 250px;
height: 250px;
}
.container:hover .overlay {
opacity: 1;
}
.image {
display: inline-block;
width: 250px;
height: 250px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 250px;
width: 250px;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}