悬停图像链接点击

Question

我的移动设备中的悬停图片存在问题。悬停图像隐藏了不透明度设置为0的href链接，并在悬停时链接显示在图像上。在使用鼠标的计算机中都非常符合逻辑。但是在移动设备中，当您点击隐藏链接的正确位置时，它只会跳过第一个悬停状态并直接跳转到链接。该链接隐藏在视线之外，但仍然可以点击。是否有可能以某种方式使链接出现在点击（你点击他的图片，它会做一些动画和链接出现）然后当链接可见时你可以点击它？我已经尝试了一些我找到的解决方案，但没有一个有效。

这是我的CSS：

.img-responsive{
    width:100%;
    height:auto%;
}
.hovereffect {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}
.hovereffect .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.hovereffect img {
    display: block;
    position: relative;
    -webkit-transition: translateX(0);
    transition: all 0.4s ease-in;
}
.hovereffect:hover img {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
    filter: grayscale(1) blur(3px);
    -webkit-backface-visibility: hidden;
    -webkit-filter: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform:  translateX(0);
    transform: scale(1.2);
}
.hovereffect h2 {
    text-transform: uppercase;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.6);
}
.hovereffect a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    border: 1px solid black;
    margin: 50px 0 0 0;
    background-color: rgba(0, 0, 0, 0.5);
}
.hovereffect a.info:hover {
    box-shadow: 0 0 5px #fff;
}
.hovereffect a.info, .hovereffect h2 {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0);
    -ms-transform:  translateX(0);
    transform: scale(0.7);
    -webkit-transition: translateX(0);
    transition: all 0.4s ease-in;
    opacity: 0;
    filter: alpha(opacity=0);
    color: #fff;
    text-transform: uppercase;
}
.hovereffect:hover a.info, .hovereffect:hover h2 {
    -webkit-backface-visibility: hidden;    
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translateX(0);
    -ms-transform:  translateX(0);
    transform: scale(1);
}

和我的HTML：

<div id="toad" class="container">
    <div class="block">
        <div class="hovereffect">
            <img class="img-responsive" src="picture1.gif" alt="some text">
            <div class="overlay">
               <h2>some other text</h2>
               <a id="link1" class="info" href="#myLINK">href link1 text</a>
            </div>
        </div>
    </div>

<div class="block">
        <div class="hovereffect">
            <img class="img-responsive" src="picture2.gif" alt="text">
            <div class="overlay">
               <h2>other text</h2>
               <a id="link2" class="info" href="#myLINK2">href link2 text</a>
            </div>
        </div>
    </div>

如果有人能帮我解决这个问题，我将非常感激。这让我疯了。