I attempted to create a hover effect on the image background and added an overlay using the "before" pseudo-element to later insert text on it. However, the overlay seems to be covering the container instead of the parent element (the Cimg1 class). When I hover, it works as intended, but when I stop hovering, the position changes again.
.Tsize{
width: 270px;
height: 270px;
margin: 0 auto;
padding-top: 70px;
overflow: hidden;
}
.Cimg1{
width: 100%;
height: 100%;
background-image: url(https://s3-us-west-1.amazonaws.com/assets.searsucker.com/content/uploads/2015/02/07172833/sandiego_thumb-253x199.png);
background-position: center;
background-size: cover;
transition: all .5s;
}
.Tsize:hover .Cimg1,
.Tsize:focus .Cimg1 {
transform: scale(1.1);
}
.Cimg1:before{
content: "";
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(19, 20, 20, 0.6);
}<div class="container-fluid">
<div class="row no-gutters">
<div class="col-4">
<div class="Tsize">
<div class="Cimg1">
</div>
</div>
</div>
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
</div>