http://prntscr.com/ajl4wh

When you hover over the picture, it moves and removes the frame. It is necessary that the picture remained static. How to do it?

PS: I use position: fixed or position: absolute - everything goes

Closed due to the fact that the essence of the issue is not clear to the participants of VenZell , aleksandr barakin , user194374, Dmitriy Simushev , Nick Volynkin ♦ Mar 28 '16 at 7:28

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • Please put an example right in the question. - VenZell
  • No need to take screenshots of the code. Instead, copy the code itself into the question. (And then you can get a screenshot of the solution in response). - Nick Volynkin ♦

3 answers 3

This is logical. The frame (border) also forms the size of the element, and it changes when it is removed - accordingly, the element shifts.

Just make the frame transparent without removing it:

 #container img { border: 25px solid black; } #container img:hover { border-color: transparent; } 
 <div id="container"> <img src="https://placeimg.com/300/125/any" alt="какая-то картинка"> </div> 

     div { width: 4em; height: 4em; background: silver; border: 1em solid blue; float: left; margin: 1em; } div:first-child:hover { border-color: transparent; } div:first-child + div:hover { border: none; padding: 1em; } 
     <div>1</div><div>2</div>

      the size of the element does not include the size of the border; therefore, when you add a border, the size of the element changes and it in turn moves away. If you register in css "box-sizing: border-box;" then the element size calculation algorithm will change and the element size will also include the border size.

      • Try to write more detailed answers. Explain what is the basis of your statement? - Nicolas Chabanovsky ♦
      • Bad option. - Qwertiy ♦