title: Joomla intro image with hover-overlay and showing intro text
body: <p>I'm stuck. Any help is appreciated.</p>
  
  <p><strong>Goal...</strong>
  When in a Joomla <em>content blog view</em> I show an intro image, I want, on hover, to fade it to 20% and show the intro text, in black, on top of the intro image. </p>
  
  <p><strong>What I've done so far...</strong>
  Alter the Joomla core file <em>blog_item.php</em> from </p>
  
  <pre><code>&lt;?php echo JLayoutHelper::render('joomla.content.intro_image', $this-&gt;item); ?&gt;
  </code></pre>
  
  <p>to</p>
  
  <pre><code>&lt;?php echo '&lt;div id="box"&gt;'; ?&gt;
  &lt;?php echo JLayoutHelper::render('joomla.content.intro_image', $this-&gt;item); ?&gt;
      &lt;?php echo '&lt;div id="overlay"&gt;'; ?&gt;
          &lt;?php echo $this-&gt;item-&gt;introtext; ?&gt;
      &lt;?php echo '&lt;/div&gt;'; ?&gt;
  &lt;?php echo '&lt;/div&gt;'; ?&gt;
  </code></pre>
  
  <p>and added CSS for opacity and positioning. </p>
  
  <p><strong>The problem is...</strong> The <em>div overlay</em> hovers over the introduction-image-link. So it's no longer clickable.</p>
  
  <p><strong>My question...</strong> How can I give the <em>div overlay</em> the same href as the introduction-image?</p>
  
  <p>Thanks for your help.</p>