Question

有没有人知道如何在Joomla（3.6.3）中的文章介绍图像上获得悬停/叠加效果。介绍图像插入到文章的介绍图像字段中，并呈现以下HTML：

<article class="uk-article" data-permalink="">  
    <a href="" title="">
        <img src="/domain/images/intro_image.jpg" alt=""></a>
            <h1 class="uk-article-title">
                <a href="" title=""></a>
            </h1>
            <p></p>
            <p></p> 
</article>

CSS

.start .uk-article img:hover{
    background:url(triangle2.png);
}

我正在尝试将文章介绍图像转换为png图像，同时将文章图像悬停...

Answer 1

如果您的意思是“覆盖”图片顶部的图标，则可以执行this之类的操作：

HTML

<div class="intro-image">
<img src="https://images.pexels.com/photos/3247/nature-forest-industry-rails.jpg?h=350&auto=compress" />
</div>

CSS

.intro-image {
  display: inline-block;
  position: relative;
}

.intro-image:hover::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  background-image: url("http://orig15.deviantart.net/3967/f/2014/046/c/f/simplistic_play_icon__ico__png__by_micahpkay-d6opha8.png");
  transform: translate(-50%, -50%);
  background-size: contain;
  z-index: 10;
}

编辑：您可以将.intro-image换成锚a标记，以使其适合您的示例，而无需编辑HTML。

Joomla Intro图像悬停/叠加效果

1 个答案: