图像悬停叠加，移动网站所需的第二次点击ahref

Question

EDITED

：
1）桌面大小：悬停叠加层工作，点击img即可进入网站。

2）移动尺寸：悬停不起作用，点击img会叠加并直接进入网站（我不希望这样）。

3）我希望移动设备的尺寸与桌面尺寸相同，然后再叠加，然后再点击一次即可进入网站。

尝试：添加第二个ahref“点击进入”IMAGE内部，而第一个带有“＃/”的ahref用于叠加目的，不起作用。更好的解决方案？

https://jsfiddle.net/6ro92ao9/

HTML

<div class="gallery">
      <a href="http://codepen.io/ngarciaiii/full/Vjwjbp/">
          <img src="http://i.imgur.com/0IGbqui.jpg" alt = "Web Ex1" class="image">
            <div class="overlay">
              <h2 class="text">HTML5 CSS3</h2>
            </div>
      </a>
    </div>

CSS

.gallery {
  position: relative;
  width: 320px;
  margin-right: auto;
  margin-bottom: 15px;
  margin-left: auto;
}

.image {
  display: block;
  width: 320px;
  height: 200px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.gallery:hover .overlay {
  opacity: .8;
}