title: How to ignore display Image On Text Link Hover CSS Only when below a certain screen size
body: <p>I used this article to add a display image on text link hover (see link and css used below) and it works great, however I want to ignore this css when viewing on mobile. It is important to note that this should be all css. Any ideas?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hover_img a {
    position: relative;
  }
  
  .hover_img a span {
    position: absolute;
    display: none;
    z-index: 99;
  }
  
  .hover_img a:hover span {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hover_img"&gt;
    &lt;a href="#"&gt;Show Image&lt;span&gt;&lt;img src="https://picsum.photos/536/354" alt="image" height="100" /&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://stackoverflow.com/questions/10769016/display-image-on-text-link-hover-css-only">Display Image On Text Link Hover CSS Only</a> </p>