title: How can I get rid of this little line in my image ? (CSS3 , hover on effect)
body: <p>I have a problem. Im fairly new to web design. I'm making a site with little images of doors that appear opened when I mouse hover on them. They will later contain links.</p>
  
  <p>the code is</p>
  
  <pre><code>&lt;table&gt;&lt;tr&gt;&lt;td background="usa-inchisa2.png" height="232px" width="181px" id="usa"&gt;&lt;/td&gt; &lt;/tr&gt;
  </code></pre>
  
  <p>and I have an external css :</p>
  
  <pre><code>#usa {
  background-image: url('usa-inchisa2.png');
  height:223px;
  width :181px;
  }
  
  #usa:hover {
  background-image: url('usa-deschisa2.png');
  </code></pre>
  
  <p>When I hover on I get this:</p>
  
  <p><img src="https://i.stack.imgur.com/XvqSD.png" alt="enter image description here"></p>
  
  <p>There is sort of residual line at the bottom of the image. I don't know where it comes from. At one point I managed to remove it but I can't remember what I did. Does it have anything to do with the table border?
  Can you help me please? Thank you</p>