Small to Large Images using CSS, that works on Mobile - html

Question

I am trying to make a rollover action using CSS, and it looks great in a browser, but does not work correctly with mobile. Anybody have any ideas on how I can do this via CSS, but if I need JavaScript instead, I am willing to consider. The CSS I am using below is a little much, I realize, but I've built out the style already but must be overlooking what to do with mobile.
.ienlarger {
float: left;
clear: none;
padding-bottom: 5px;
padding-right: 5px;
}
.ienlarger a {
display:block;
text-decoration: none;
}
.ienlarger a:hover{ position:relative;
}
.ienlarger span img {
border: 1px solid #FFFFFF;
margin-bottom: 8px;
}
.ienlarger a span {position: absolute;display:none;color: #FFCC00;text-decoration: none;font-family: Arial, Helvetica, sans-serif;font-size: 13px;font-weight: bold;padding:5px;border:3px solid #289fd9;box-shadow: 0px 0px 5px #2382b1;background-color:#fff;
}
.ienlarger img {border-width: 0;}
.ienlarger a:hover span {
display:block;
top: 50px;
left: 90px;
z-index: 100;width:300px;
}
.resize_thumb {
width: 150px;
height : auto;
}
<table>
<tbody>
<tr bgcolor="#289fd9">
<td width="25%">The Image</td>
<td width="75%"><strong>Verbiage</strong></td>
</tr>
<tr>
<td style="background-color: rgb(255, 255, 255);vertical-align:middle;" class="ienlarger"><a href="#"><img src="http://fiftyshadesofkevin.com/images/small.jpg" width="50%" class="resize_thumb" /><span>
<img src="http://fiftyshadesofkevin.com/images/large.jpg" alt="large" /></span></a></td>
<td>Here is something that would describe the image</td>
</tr>
</tbody>
</table>
Here is the sample page
http://fiftyshadesofkevin.com/hover.html
Anybody with ideas and concepts would be greatly appreciated.

Answer 1

I was able to do the below to make it work:
.ienlarger {
float: left;
clear: none; /* set to left or right if needed */
padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}
.ienlarger a {
display:block;
text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}
.ienlarger a:hover{ /* don't move this positioning to normal state */
position:relative;
}
.ienlarger span img {
border: 1px solid #FFFFFF; /* adds a border around the image */
margin-bottom: 8px; /* pushes the text down from the image */
}
.ienlarger a span { /* this is for the large image and the caption */
position: absolute;
display:none;
color: #FFCC00; /* caption text colour */
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px; /* caption text size */
font-weight: bold;
padding:5px;border:3px solid #289fd9;box-shadow: 0px 0px 5px #2382b1;background-color:#fff;
}
.ienlarger img { /* leave or IE puts a border around links */
border-width: 0;
}
.ienlarger a:hover span {
display:block;
top: 50px; /* means the pop-up's top is 50px away from thumb's top */
left: 90px; /* means the pop-up's left is 90px far from the thumb's left */
z-index: 100;width:300px;
/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */
/* If you want the pop-up open above the thumb, remove the top: 50px; and add
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */
/* add cursor:default; to this rule to disable the hand cursor only for the large image */
}
.resize_thumb {
width: 150px; /* enter desired thumb width here */
height : auto;
}