Add a Link to an Overlay Image - html

Question

I would like to add a link to an image that has an overlay applied to it. When users hover over the image they get an opaque overlay and text appear. This works great, however I also need users to be able to click that image and taken to a link.
I have pasted my code below - the overlay works but the link portion does not. I believe it's because the overlay is interfering. I tried changing the placement of the link but was unable to do so. I am able to make the '+' be the link, but ideally the entire image should link.
Any thoughts?
JSFiddle
.roomphoto:hover .img__description { transform: translateY(0); }
.roomphoto .img__description_layer { top: 30px; }
.roomphoto:hover .img__description_layer { visibility: visible; opacity: 1; }
.img__description_layer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #cdcbca;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity .2s, visibility .2s;
}
.roomphoto {
height: 166px;
}
.img__description {
transition: .2s;
transform: translateY(1em);
z-index: 999;
}
.overlay {
position: relative;
}
.overlay:after {
position: absolute;
content:"";
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
}
.overlay:hover:after {
opacity: .8;
}
.blue:after {
background-color: #1a3761;
}
.img__description a {
color: #fff;
}
.roomselect {
clear: both;
float: none;
width: 100%;
max-width: 1000px;
margin: 0px auto;
padding-top: 20px;
}
.roomselect img {
width: 100%;
margin-bottom: -10px;
}
.room3 {
width: 32%;
text-align: left;
float:left;
}
<div class="roomselect"><div class="room3">
<div class="roomphoto overlay blue">
<a href="http://www.google.com">
<img src="https://cdn.mos.cms.futurecdn.net/J9KeYkEZf4HHD5LRGf799N-650-80.jpg" alt="Image Text" />
</a>
<div class="img__description_layer">
<p class="img__description">
<span style="border-radius: 50%; width: 30px; height: 30px; padding: 0px 14px; border: 1px solid #fff; text-align: center; font-size: 36px;">+</span>
</p>
</div>
</div>
</div>

Answer 1

You need to rearrange your html in such a way that when you click on image, you are actually clicking on the anchor tag. I have made some changes to your html, let me know if these work. You might have to increase roomphoto height.
<div class="roomselect">
<div class="room3">
<a href="http://www.google.com">
<div class="roomphoto overlay blue">
<img src="https://cdn.mos.cms.futurecdn.net/J9KeYkEZf4HHD5LRGf799N-650-80.jpg" alt="Image Text" />
<div class="img__description_layer">
<p class="img__description"><span style="border-radius: 50%; width: 30px; height: 30px; padding: 0px 14px; border: 1px solid #fff; text-align: center; font-size: 36px;">+</span></p>
</div>
</div>
</a>
</div>
</div>