CSS悬停过渡

Question

I have one question about my css hover effect.

This is my DEMO page from codepen .

The problem is hover over image. If you click my demo page then you see what is wrong in my script.

When you hover over the image with your mouse first image is ok but when you move mouse another image my gradient color moving left.

Anyone knows solution ?

This is my CSS code for image hover transition and gradient color:

.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

The element div.gradient_c is absolutely positioned and doesn't adhere to the overflow: hidden; add relative positioning to its parent and increase the width - updated demo

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

Update The problem is that you are adjusting an element with positioned decedents. They follow the increase width appearing as though they are moving

Changing .abo_im:hover to .abo_im:hover img will only affect the width of the image. Demo

Answer 2

change the width property it should work

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