title: Two text over a gradient image. Every element with a different link
body: <p>I'm getting crazy to solve a situation.</p>
  
  <p>I have an image with two titles. The titles are over the image that has also a gradient to improve readability.</p>
  
  <p>Every title has a different link, the image is linked to another url. </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-html lang-html prettyprint-override"><code>    &lt;div&gt;
       &lt;a href="www.disney.com"&gt;
        &lt;img alt="image" src="https://cdn.dday.it/system/uploads/cover_element/custom_image/1/prime_cov.jpg"&gt;
       &lt;/a&gt;
       &lt;div class="gradient"&gt;&lt;/div&gt;
       &lt;div class="title"&gt;
        &lt;h2&gt;
         &lt;a href="www.example.com"&gt;First title &lt;/a&gt;
         &lt;a href="www.cnn.com"&gt;Second title&lt;/a&gt;
        &lt;/h2&gt;
       &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that with the text over the image i cannot click to the separate link. I get always the image link. How can I solve?</p>
  
  <p>I create a pen.</p>
  
  <p><a href="https://codepen.io/robypez/pen/eKzKvN" rel="nofollow noreferrer">Codepen</a></p>