【问题标题】:Joomla Intro Image hover/ overlay effectJoomla Intro 图​​像悬停/叠加效果
【发布时间】:2016-11-17 18:54:26
【问题描述】:

有谁知道如何在 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 图片...

【问题讨论】:

  • 您要更改图片还是仅在其上显示另一张图片(具有透明背景)?
  • 我想在上面显示一张图片(透明背景)。

标签: html css joomla


【解决方案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。

【讨论】:

  • 问题是我不知道如何在渲染的img标签周围添加一个div,因为图像是从Joomla文章中名为“intro image”的字段渲染的。任何建议如何在 Joomla 中获取 img 标签周围的 div 标签?
  • 然后使用锚标签而不是div:.uk-article &gt; a:hover::before
  • 它也没有工作。但是我找到了一个我编辑的名为 article.php 的文件。我在 img 标签周围添加了一个 div,其中包含来自 uikit 的一些覆盖类,并且确实有效。
  • codepen 上工作得很好。
猜你喜欢
  • 2021-06-23
  • 1970-01-01
  • 1970-01-01
  • 2017-07-04
  • 2016-02-16
  • 2014-05-25
  • 2013-04-27
  • 2015-01-12
  • 2011-05-08
相关资源
最近更新 更多