Thread:JoePlay/@comment-27986077-20180924034925/@comment-171752-20180924160604

This can be done with CSS. You can see it working on this page at my sandbox wiki. On the page itself, I created a div and gave it the class name of "feather". I also set the width and height of the div to match the dimensions of the feather images. The code on the page is simply this:

Then I added the following code to MediaWiki:Wikia.css.

.feather { background-image: url(https://vignette.wikia.nocookie.net/central/images/9/9c/GOT7_Feather_%28No_Color%29.png); } .feather:hover { background-image: url(https://vignette.wikia.nocookie.net/central/images/1/1c/GOT7_Feather_%28Color%29.png); }

As you can see, the  selector is what does the magic of displaying the colored image when the div is hovered.