Home>

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
}

  • 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