html - 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 替换为 anchor a 标记，这样它就适合您的示例，而无需编辑 HTML。