title: How to stop images movement after border hover?
body: <p>I have 3 images that i coded via css to have border hover. 
  It is simple and nice but the images keep moving when hover.</p>
  
  <p>
    <a href="http://coreneto.com/rental/static/dist/img/cam.jpg" rel="nofollow noreferrer">http://coreneto.com/rental/static/dist/img/cam.jpg</a>&nbsp;&nbsp;
    <a href="http://coreneto.com/rental/static/dist/img/car.jpg" rel="nofollow noreferrer">http://coreneto.com/rental/static/dist/img/car.jpg</a>&nbsp;&nbsp;
    <a href="http://coreneto.com/rental/static/dist/img/phone.jpg" rel="nofollow noreferrer">http://coreneto.com/rental/static/dist/img/phone.jpg</a>
  </p>
  
  <p>Here is live: <strong><a href="https://jsfiddle.net/rami7250/8Ly9jyrh/" rel="nofollow noreferrer">JSfiddle</a></strong></p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;center&gt;
    &lt;a class="round" href="http://coreneto.com/rental/cars"&gt;&lt;img src="http://coreneto.com/rental/static/dist/img/cam.jpg" width="200" height="200"&gt;&lt;/a&gt;&amp;nbsp;&amp;nbsp;
    &lt;a class="round" href="http://coreneto.com/rental/cars"&gt;&lt;img src="http://coreneto.com/rental/static/dist/img/car.jpg" width="200" height="200"&gt;&lt;/a&gt;&amp;nbsp;&amp;nbsp;
    &lt;a class="round" href="http://coreneto.com/rental/tickets"&gt;&lt;img src="http://coreneto.com/rental/static/dist/img/phone.jpg" width="200" height="200"&gt;&lt;/a&gt;
  &lt;/center&gt;
  </code></pre>
  
  <p>and here is the css:</p>
  
  <pre><code>a.round:hover {border: 5px solid #005FD0; display: inline-block; position: static;
      cursor: pointer;  }
  </code></pre>
  
  <p>What is the correct css method i need to use to keep them in place when hovring?</p>