title: why does my image move when i hover over it
body: <p>So I have an image on my website inside a div with a border over it of 8px like a thumbnail so that when I click the img it links to a page. But when i hover over the image it moves (what i think to be precisely) 16px (the length of the border on both sides. Does it have anything to do with the fact the div has a border when when the image is hovered it is no longer in the div? I dont know. Some reason with explanation would be great. Here is my code.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="box1" class="box"&gt;&lt;br&gt;
     &lt;a href="google.com"&gt;&lt;img src="images/box1.png" /&gt;&lt;/a&gt;&lt;br&gt;
  &lt;/div&gt;&lt;br&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.box {
      height: 250px;
      width: 250px;
      margin-right: 20px;
      border: 8px solid white;
      float: left;
      display: block;
  }
  
  
   img {
      width: 250px;
      height: 250px;
      -moz-transform: rotate(0);
      transform: rotate(0);
  }
  </code></pre>
  
  <p>I've tried things like img a:hover to change things and also margin-left: -16px but that didnt work either. Any help would be appreciated. Thanks</p>