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

Is it possible to use with images that take you to another link? Is there a way to make it look more natural like here in GOT7's official website when you hover on the feather? So like make the change slower? Yes and yes. I updated the test page to do both of those things. For the slow change between the images, all I did was add  so that the code now looks like this:

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

The  is the duration of the transition in seconds. Feel free to adjust as needed, such as  for a second and a half or   for 2 seconds.

To make it link to another page, first you need to create a transparent image that matches the dimensions of the two transition images, which is 196x470 in this case. So I created and uploaded and inserted it inside the div as normal wikitext. The div code now looks like this:



Clicking the feather now takes you to the page on the wiki titled Test.

and is it posible to change its position? I'm not sure what you mean, exactly. Please give me as much detail as you can, and I'll be happy to give you the best answer.