html - css 悬停在过渡上

Question

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

这是我的 DEMO 来自 codepen 的页面。

问题是将鼠标悬停在图像上。如果你点击我的演示页面，你就会看到我的脚本有什么问题。

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

有人知道解决办法吗？

这是我的图像悬停过渡和渐变颜色的 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