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
-
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
- html - about position: absolute;
- html - i'm getting an error because its mime type ~, but i don't know how to solve it
- html - about parent-child element relationship
- html - bootstrap card about the height of the bootstrap card
- i have a question about html css
- html - about width specification to check with developer tools
- html - solve the mystery phenomenon that the layout is different depending on the user even though the same code and the same cs
- html - about duplication of click () event in jquery
- html - about adjustment problem of icon image + balloon
- html - about changing the font color of css
- python - about pulp shift scheduling
- about the phenomenon that the [id] set in rails collection_select changes on the html side
- html - about vendor prefixes after the recommendation stage
- html - [ruby on rails] about the problem that line breaks are not reflected in the text data acquired by innertext of mechanize
- about scroll display when overflowing html elements
- html - please tell me about the layout of the navigation bar of bootstrap4
- html - about the part where mix-blend-mode is not reflected
- [html] about specifying height in responsive design
- html - about the work of multiple people
- html - about chrome verification tool
Related questions
- html : Is it possible to make the site open on a larger scale?
- css is not reflected in html
- html - is it possible to set the vertical width as a ratio according to the horizontal width of the parent element with css?
- html - list side by side mysterious blank
- html - how to check the display on a high resolution screen
- html - when i specify the background color, there is a mysterious margin on the left side
- html - [beginner] about side by side flexbox
- html - how to erase the margins on the header
- html - about the use of animation-delay in css
- javascript - animation-fill-mode: forwards;of the second css animation done with setattribute does not work
Do not change image + frame size
Do not change position of image + frame
I'm evil!Do not change image size
Do not change the position of the image