title: clickable figcaption link on top of image Wordpress
body: <p>I'm helping a friend setting up a Wordpress page and I have an issue that I can't figure out how to fix.</p>
  
  <p>I have added some image widgets to the sidebar that links to different categories on the site. The problem is that the image text should be on top of the image in a semi transparent box, and this box is not a clickable link. Is it possible to add the same link to the box?</p>
  
  <p>The widget generates an HTML structure like shown in the example below and I have added some CSS to show how the semi transparent text box looks like.</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>figcaption {
    position: relative;
    height: 80px;
    width: 300px;
    background: white;
    top: -235px;
    left: 85px;
    padding-top: 60px;
    text-align:center;
    opacity: 0.8;
    font-weight: bold;
    font-size: 140%
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;figure&gt;
    &lt;a href="some link"&gt;
      &lt;img src="http://static.highsnobiety.com/wp-content/uploads/2016/09/07200609/super-mario-run-iphone-7-01-480x320.jpg"&gt;
    &lt;/a&gt;
    &lt;figcaption&gt;Super Mario&lt;/figcaption&gt;
  &lt;/figure&gt;</code></pre>
  </div>
  </div>
  </p>