От малого до большого изображений с использованием CSS, который работает на мобильном телефоне

Question

Я пытаюсь сделать действие опрокидывания с помощью CSS, и он отлично смотрится в браузере, но не работает корректно с мобильным телефоном. У кого-нибудь есть идеи о том, как я могу это сделать с помощью CSS, но если мне нужен JavaScript, я готов рассмотреть. Я понимаю, что CSS, который я использую ниже, немного немного, но я уже разработал стиль, но должен упускать из виду, что делать с мобильным телефоном.

.ienlarger { 
 
    \t float: left; 
 
    \t clear: none; 
 
    \t padding-bottom: 5px; 
 
    \t padding-right: 5px; 
 
    } 
 
    .ienlarger a { 
 
    \t display:block; 
 
    \t text-decoration: none; 
 
    } 
 
    .ienlarger a:hover{ position:relative; 
 
    } 
 
    .ienlarger span img { 
 
    \t border: 1px solid #FFFFFF; 
 
    \t 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 { 
 
    \t display:block; 
 
    \t top: 50px; 
 
    \t left: 90px; 
 
    \t z-index: 100;width:300px; 
 
    } 
 
    .resize_thumb { 
 
    \t width: 150px; 
 
    \t 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> 
 
    \t \t \t <td>Here is something that would describe the image</td> 
 
       </tr> 
 
      </tbody> 
 
</table>

Вот образец страницы http://fiftyshadesofkevin.com/hover.html

Кто-нибудь с идеями и понятиями было бы весьма признателен.

Answer 1

Я был в состоянии сделать ниже, чтобы заставить его работать:

.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; 
}