Clickable image within figure and overlaid paragraphs - html

Question

I'm having trouble making my image clickable. I have a <figure> that is wrapped over an image and some paragraph elements. I also have some CSS such that when you hover over the figure, the paragraphs transition from bottom (off screen) to the top one at a time. I think this animation is what is keeping me from using the conventional approach of wrapping the image in anchor tags, like in this question: a href link on img.
Unfortunately, I already have a lot riding on this particular HTML configuration, so I'm not sure if radically rearranging the DOM elements will be permissible. If at all possible I would like to keep the figures, images and paragraphs in their current configuration and work around that. Here is a demo:
figure img {
width: 300px;
height: 300px;
}
figure h2 {
max-width: 235px;
}
figure {
border: 2px solid black;
margin-bottom: 0;
margin-top: -2px;
margin-right: -40px;
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
text-align: center;
}
figure figcaption {
padding: 2em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
figure figcaption::before,
figure figcaption::after {
pointer-events: none;
}
figure figcaption {
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 100%;
}
figure p {
font-family: Play;
font-size: 20px;
max-width: 235px;
height: auto;
overflow: hidden;
position: relative;
opacity: 0;
bottom: -110%;
}
figure:hover h2 {
opacity: 0;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, transform 0.95s;
}
figcaption:hover p:nth-of-type(1) {
transition: 1s;
bottom: 70%;
opacity: 1;
}
figcaption:hover p:nth-of-type(2) {
bottom: 70%;
opacity: 1;
transition: 1s;
transition-delay: .3s;
}
figcaption:hover p:nth-of-type(3) {
bottom: 70%;
opacity: 1;
transition: 1s;
transition-delay: .6s;
}
figure:hover .border-rect {
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
figure.effect img {
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect:hover img {
opacity: 0.4;
}
figure.effect figcaption::before,
figure.effect figcaption::after {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect figcaption::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
figure.effect figcaption::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
}
figure.effect h2 {
opacity: 1;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, transform 0.95s;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
padding-top: 30%;
max-width:235px;
}
figure.effect:hover figcaption::before,
figure.effect:hover figcaption::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure:hover h2 {
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
<figure class="effect">
<img src="http://en.wikipedia.org/wiki/Mountain#/media/File:Lewis_overthrust_fault_nh10f.jpg">
<figcaption>
<a href="www.the-image-url.com/">
<h2>Hover Somewhere Around Here
</h2>
<p>paragraph paragraph paragraph paragraph paragraph paragraph </p>
<p>So you think you can hover, huh?</p>
<p>paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</a>
</figcaption>
</figure>
Question
I can't quite put my finger on why I can't get the image to be clickable. I also tried wrapping the whole figure in the <a>, but it doesn't work. My goal is: if the user clicks anywhere on the figure the link will be called and I do not want to sacrifice any other elements as they currently stand. Is this at all possible? if so how?
My guess is the layering or z-index of my elements doesn't allow for this, but I hope there is a work around.

Answer 1

You Have Image tag that is overwritten by Overlay which is hovered and You had Given link to image that's the issue. Either You Can have link in overlay element
<figure class="effect">
<img src="http://en.wikipedia.org/wiki/Mountain#/media/File:Lewis_overthrust_fault_nh10f.jpg">
<figcaption>
<a href="www.the-image-url.com/">
<h2>Hover Somewhere Around Here
</h2>
<p>paragraph paragraph paragraph paragraph paragraph paragraph </p>
<p>So you think you can hover, huh?</p>
<p>paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</a>
View more
</figcaption>
</figure>
Edit: add / Update Following CSS
figcaption a {
top: 0px;
left: 0;
width: 100%;
height: 100%;
text-decoration: none;
max-width: 300px;
color: #333;
position: absolute;
right: 0px;
text-align: center;
}
figure.effect h2 {
opacity: 1;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, transform 0.95s;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
padding-top: 30%;
max-width: 235px;
margin: auto;
}
figure p {
font-family: Play;
font-size: 20px;
max-width: 235px;
height: auto;
overflow: hidden;
position: relative;
opacity: 0;
bottom: -110%;
margin: auto;
}