Question

因此，我试图在图像背景上进行悬停效果，然后尝试使用“之前”添加覆盖，然后在其上添加一些文本，我的问题是覆盖看起来覆盖了容器父元素的元素，那将是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

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

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

在position:absolute;上使用.Cimg1:before时

position：absolute; 相对于其第一个定位（非静态）祖先元素定位

我正在尝试在悬停时对背景进行放大

1 个答案: