title: Clickable image within figure and overlaid paragraphs
body: <p>I'm having trouble making my image clickable. I have a <code>&lt;figure&gt;</code> 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="https://stackoverflow.com/questions/3779812/a-href-link-on-img">a href link on img</a>.</p>
  
  <p>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. <strong>If at all possible</strong> I would like to keep the figures, images and paragraphs in their current configuration and work around that. Here is a demo:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;figure class="effect"&gt;
        &lt;img src="http://en.wikipedia.org/wiki/Mountain#/media/File:Lewis_overthrust_fault_nh10f.jpg"&gt;
        &lt;figcaption&gt;
          &lt;a href="www.the-image-url.com/"&gt;
          &lt;h2&gt;Hover Somewhere Around Here
          &lt;/h2&gt;
          &lt;p&gt;paragraph paragraph paragraph paragraph paragraph paragraph &lt;/p&gt;
          &lt;p&gt;So you think you can hover, huh?&lt;/p&gt;
          &lt;p&gt;paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph&lt;/p&gt;
          &lt;/a&gt;
        &lt;/figcaption&gt;
      &lt;/figure&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>Question</h2>
  
  <p>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 <code>&lt;a&gt;</code>, but it doesn't work. My goal is: if the user clicks anywhere on the figure the link will be called <strong>and</strong> I do not want to sacrifice any other elements as they currently stand. Is this at all possible? if so how? </p>
  
  <p>My guess is the layering or z-index of my elements doesn't allow for this, but I hope there is a work around.</p>