image hover overlay, ahref on second click needed for mobile website

Question

EDITED:
1) desktop size: hover overlay works, a click on img leads to the website.

2) mobile size: hover doesn't work, a click on img does both overlay and goes straight to the website (I don't want that).

3) I want mobile size to behave ALMOST same as desktop size, overlay then a second click to lead to the website.

Tried: Added second ahref "Click to enter" inside IMAGE while having first ahref with "#/" for overlay purpose, doesn't work. Any better solution?

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