Jquery 如何使用CSS3悬停过渡/转换效果在HTML元素上启用触摸幻灯片？

我想在移动设备上启用touch，并在HTML元素上实现与悬停状态相同或类似的效果

我有一个悬停的图像，应用了transformX的CSS3转换。我想用手机实现同样的效果，但只需向左滑动或点击即可

这在CSS3/HTML中可能吗？如果不是，您建议使用哪个jquerytouch库

这是我的小提琴：

HTML

录制一次可以通过使用：聚焦技巧实现。 我还把图片移到了锚的一边，这样录音就不会打开链接

HTML:

---

谢谢@Imran Bughio。但不完全是我想要的。在iPhone/iPad上测试时不起作用。

<a href="http://google.com" class="slide transform multi">
<img src="http://media02.hongkiat.com/fruits-vege-stock-photos/highres/orange-stock04.jpg" />

<div class="info">Fruit Info</div>  
</a>

a.slide{
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
}
.transform {
    overflow:hidden;
}
.info{
    color:#FFF;
    font-family: arial;
    position: absolute; 
    width: 100%; 
    padding: 10px; 
    top: 0px; 
    left: 0px; 
    background-color: rgba(0, 0, 0, 0.6);
}
.transform img {
    position: relative;
    z-index: 5;
    width: 100%;
    height: auto !important;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

.transform:hover img {
    transform: translateX(90%);
    opacity: .4;
}
.multi{
    background: url(http://media02.hongkiat.com/fruits-vege-stock-photos/highres/fruitsvege-stock37.jpg); 
    background-size:cover;
}

<div class="slide transform multi">
    <img src="http://media02.hongkiat.com/fruits-vege-stock-photos/highres/orange-stock04.jpg" />
    <a href="http://google.com" class="">
        <div class="info">Fruit Info</div>
    </a>
</div>

.transform {
  overflow:hidden;
  height: auto;
}
.info{
    color:#FFF;
    font-family: arial;
    position: absolute; 
    width: 100%; 
    padding: 10px; 
    top: 0px; 
    left: 0px; 
    background-color: rgba(0, 0, 0, 0.6);
}
.transform img {
    position: relative;
    z-index: 5;
    width: 100%;
    height: auto !important;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

.transform:hover img, .transform:focus img, .transform img:focus {
  transform: translateX(90%);
    opacity: .4;
}
.multi{background: url(http://media02.hongkiat.com/fruits-vege-stock-photos/highres/fruitsvege-stock37.jpg); background-size:cover}