Joomla Intro Image hover/overlay effect

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; 
} 

EDIT: Вы можете обменять .intro-image для якорной a тега, так что подходит по вашему примеру, без необходимости редактирования в HTML.