Joomla intro image with hover-overlay and showing intro text

0
votes

I'm stuck. Any help is appreciated.

Goal... When in a Joomla content blog view 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.

What I've done so far... Alter the Joomla core file blog_item.php from 

<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>

to

<?php echo '<div id="box">'; ?>
<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
    <?php echo '<div id="overlay">'; ?>
        <?php echo $this->item->introtext; ?>
    <?php echo '</div>'; ?>
<?php echo '</div>'; ?>

and added CSS for opacity and positioning.

The problem is... The div overlay hovers over the introduction-image-link. So it's no longer clickable.

My question... How can I give the div overlay the same href as the introduction-image?

Thanks for your help.

1
phpcssjoomla

1 Answers

0
votes

The simplest way that I can think of right away is to implement a click listener on the overlay div and take the user to the desired url using window.location