html - Joomla Intro Image hover/ overlay effect -

does know how hover/ overlay effect on article intro image in joomla (3.6.3). intro image inserted in intro image field in articles , renders following 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); } 

i trying article intro image change png image while hovering article image...

if mean "overlay" icon on top of image, can 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: can exchange .intro-image anchor a tag fit's example without need edit of html.