Joomla Intro 图​​像悬停/叠加效果

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。