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.
Comments
Post a Comment