I've been working on an image and a slider, and everything seems to be functioning as intended. However, there is a strange reaction on the left side even before reaching the image. I've tried tweaking it, but I can't seem to figure out the cause. Additionally, I haven't focused much on the text part yet.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 40px;
left: 225px;
right: -50%;
background-color: black;
overflow: hidden;
width: 137%;
height: 0%;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: relative;
bottom: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.actives_center_image_1{
position: relative;
margin-left: 30%;
bottom: 40px;
display: block;
}<div class="container">
<img src="https://cdn.vox-cdn.com/uploads/chorus_asset/file/16026669/got_lede_image.jpg" class="actives_center_image_1">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>