Home>

html - i want to solve a shift of about 1px when hovering an image

I want to fix it because the image shifts when hovering.


img {
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.2s ease-in;
transition: 0.2s ease-in;
filter: alpha (opacity = 100);
opacity: 1;

display: inline-block;
padding: 20px;
}

img: hover {
cursor: cell;
border: 1px solid #fff;
padding: 20px;
opacity: 0.4;
transition: .6s;
backface-visibility: hidden;
display: inline-block;
background: none
}

html css3
  • Answer # 1

    Do not change image + frame size

    Do not change position of image + frame

    box-sizing: border-box
    I'm evil!

    Do not change image size

    Do not change the position of the image

    border: 1px solid #fff;
position: relative;
top: —1px;
left: -1px

  • Answer # 2 

    img: not (: hover) {
  border: 1px solid transparent;
}

  • Answer # 3 

    img: hover {
cursor: cell;
/ * border: 1px solid #fff;* /
padding: 20px;
opacity: 0.4;
transition: .6s;
backface-visibility: hidden;
display: inline-block;
background: none
}

    I'm out of touch because of this border. Is there any reason for this border?
    I think that it will be solved by deleting this at the time of hover or inserting border before hover

Related articles