How can you display an email image for mobile devices only?

Question

We are trying to display an image only if the user is on a mobile device. Here's what we have so far:

div style="display: none; max-height: 0px; overflow: hidden; line-height: 0px;" class="show">
table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#ffffff" style="display: none;" class="showTable">
tr>
td align="center" width="100%">
a href="#" target="_blank" conversion="true" alias="Zone 1_Image_Get Free Passes">
img src="http://image.email.amctheatres.com/lib/fef51178716702/m/1/Fluffy_mobile_banner.jpg" alt="" width="300" height="294" border="0"/>
/a>
/td>
/tr>
/table>
/div>

Answer 1

What we did was this.....

  table[class="tbl"] .hide-for-small {
  display: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
table[class="body"] .show-for-desktop {
  display: none !important;
}
table[class="body"] .show-for-small {
  display: inherit !important;
  height: auto !important;
  line-height: 0 !important;
}
td[class="mobile-hide"], td[class="mobile-hide"] img {
  display: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
img[id="mobile-fill"] {
  display:block !important;
  width: 100% !important;
  height: auto !important;

}
div[id="hidden-image"] {
  display: block !important;
  width:100% !important;
  height: auto !important;
}
table[class="tbl"] .hide-for-desktop {
  display: inherit !important;
}



<div id="hidden-image" style="display: none; font-size: 0; height: 0; line-height: 0; margin:0; padding: 0; mso-hide: all;overflow:hidden;">
    <a href="LINK" target="_blank" style="color: #2ba6cb; text-decoration: none;">
       <img src="IMAGE_URL" style="border: none;" id="mobile-fill" width="0" height="0" border="0" />
     </a>
 </div>