Question

我有一个关于我的css悬停效果的问题。

这是codepen的 DEMO 页面。

问题是悬停在图片上方。如果您单击我的演示页面，那么您会看到我的脚本中出现了什么问题。

当您使用鼠标将鼠标悬停在图像上时，第一张图像就可以了，但当您将鼠标移动到另一张图像时，我的渐变颜色向左移动。

任何人都知道解决方案吗？

这是我用于图像悬停过渡和渐变颜色的CSS代码：

.abo_im {
  float:left;
  width:170px;
  height:150px;
overflow:hidden;
  -webkit-transition: all .3s ;
        -moz-transition: all .3s ;
        -ms-transition: all .3s ;
        -o-transition: all .3s ;
        transition: all .3s ;


}
.abo_im  img.height {
   width: 100%;
   height:auto;

}
.abo_im img {
  width:100%; 

}
.abo_im:hover {
  width:120%; 
  margin: 0 0 0 -10%; 
        -moz-transition: all .3s ;
        -ms-transition: all .3s ;
        -o-transition: all .3s ;
        transition: all .3s ;   
}
.gradient_c {
  position:absolute;
  width:170px;
  height:150px;
   z-index:1;
  background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

    }

Answer 1

元素div.gradient_c绝对定位，并且不会遵守overflow: hidden;向其父级添加相对定位并增加宽度 - updated demo

.abo_im {
    position: relative;
}
.gradient_c {
    width: 186px;
}

更新问题是您正在调整具有定位的死者的元素。它们跟随增加的宽度出现，好像它们正在移动

将.abo_im:hover更改为.abo_im:hover img只会影响图片的宽度。 Demo

Answer 2

更改它应该工作的宽度属性

.gradient_c {
  position:absolute;
  width:auto;//change this
  height:150px;
   z-index:1;
  background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}

css悬停在过渡期间

2 个答案: