title: Removing underlining from image link
body: <p>I have a <a href="http://calculemmas.github.io/posts/mapping-the-early-english-book-trade" rel="noreferrer">page</a> with a single large image that also has a link element, and I'd like to remove the underlining from the image link. I am working in Chrome, which displays the highlighting under the image link and claims the css is introduced by<code>user agent stylesheet</code>, which I understand is Chrome's default css. The <code>user agent stylesheet</code> brings the following style to my page:</p>
  
  <pre><code>a:-webkit-any-link {
      color: -webkit-link;
      text-decoration: underline;
      cursor: auto;
  }</code></pre>
  
  <p>How can I remove the underlining from this image link? I tried setting the id of my link and image to <code>img-link</code> then targeting that id with the following css, but haven't had any luck:</p>
  
  <pre><code>&lt;a id="img-link" href="/images/post_images/mapping_early_english_books/provincial_printing.png" data-lightbox="provincial_printing" data-title="My caption"&gt;
    &lt;img id="img-link" src="/images/post_images/mapping_early_english_books/provincial_printing.png" alt="Provincial Printing" style="width:100%" /&gt;&lt;/a&gt;&lt;/p&gt;
  
  #img-link {
      text-decoration: none;
  }
  </code></pre>
  
  <p>Any help others can provide on removing this underlining will be greatly appreciated!</p>