我试图在悬停时在背景上放大效果

Question

所以我试图在图像背景上制作悬停效果，这样做之后我尝试使用"before"添加一个叠加层，然后在上面添加一些文本，我的问题是覆盖层看到覆盖容器而不是父元素，这将是 Cimg1 类，然后当我悬停时它按预期工作，但当我停止悬停时，它会再次改变位置。

.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>

Answer 1

只需在.Cimg1上添加position:relative;作为父元素即可。

.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;
position:relative;
}

正如您在.Cimg1:before上使用position:absolute;一样

位置：绝对;相对于其第一个定位(非静态(祖先元素定位