Joomla簡介圖像懸停/疊加效果

有誰知道如何獲得Joomla（3.6.3）中的文章介紹圖像上的懸停/疊加效果。前奏圖像插入在文章介紹像場，並呈現以下HTML：Joomla簡介圖像懸停/疊加效果

<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圖片，而徘徊文章圖片...

來源

2016-11-17 sebastianqvist

你想要更改圖像還是隻顯示其他圖像（帶有透明背景）？ – TomasB

我想在上面顯示圖像（帶有透明背景）。 – sebastianqvist

如果通過了「疊加」上的圖像的頂部的圖標的意思是，你可以這樣做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; 
}

編輯：您可以爲錨a標籤交換.intro-image所以它適合的你的榜樣，而不需要對HTML的編輯。

來源

2016-11-17 19:26:41 TomasB

問題是，我不知道如何在渲染的img標籤周圍添加div，因爲圖像是從Joomla中的一篇文章中的一個名爲'intro image'的字段中渲染的。任何建議如何在img周圍獲得div標籤標籤在Joomla？ – sebastianqvist

然後使用錨標記而不是div： '.uk-article> a：hover :: before' – TomasB

它也沒有用。但是，我找到了一個名爲article.php的文件，我編輯了它。我在img標籤周圍添加了一些來自uikit的覆蓋類，並確實有效。 – sebastianqvist

Joomla簡介圖像懸停/疊加效果

回答

相關問題