具有懸停覆蓋並顯示介紹文字的Joomla介紹圖片

Question

我被卡住了。 任何幫助表示贊賞。

目標...在Joomla 內容博客視圖中，我顯示一個簡介圖像，將其懸停時希望將其淡化至20％，並在簡介圖像上方以黑色顯示該簡介文本。

到目前為止，我所做的...更改Joomla核心文件blog_item.php，來自

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

至

<?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>'; ?>

並增加了CSS的不透明度和位置。

問題是... div疊加層徘徊在Introduction-Image-Link上。 因此它不再可點擊。

我的問題...我怎樣才能使div疊加層與簡介圖像具有相同的href？

謝謝你的幫助。

Answer 1

我馬上想到的最簡單的方法是在overlay div上實現點擊偵聽器，並使用window.location將用戶帶到所需的url。