Forum:Highlighting effect

Hello all,

On Wikimedia I noticed some buttons have a nice highlighting effect. For example on, when you move your mouse over the buttons 'download', 'use this file', etcetera. I'd like to use that highlight effect on my wiki, for example on the pics on this page, but how? --- Zantam03 ( Talk ) 21:47, May 18, 2012 (UTC)


 * That's a relatively simple effect to achieve with jQuery. You could put each image inside a div with a custom class, such as "fadein", then use this code in your wiki's MediaWiki:Common.js:


 * --Gardimuer { ʈalk } 22:52, May 18, 2012 (UTC)


 * Or, you can use CSS and more specifically the :hover property and maybe transitions if you want it to be more "fancy"
 * Nevermind, I thought you were talking about buttons, didn't notice you wanted the effect for the images. JS is the only way to go then if you want it animated. If not, CSS covers you.-- Noemo n  * talk * 23:28, May 18, 2012 (UTC)


 * This can be achieved with CSS as well (hover over the navigation images here to see an example) by using the transition method. As with most other CSS3 methods, it's not fully cross-browser compatible yet, but it is an alternative to using JavaScript/jQuery. — Sovq 06:41, May 19, 2012 (UTC)


 * I used Gardimuer's trick and it worked, thanks! Sovq's idea looks nice as well, but not sure what colour I could use to fade in. --- Zantam03 ( Talk ) 16:42, May 19, 2012 (UTC)

Is it also possible to fade one picture into another one? For example I have a picture of 漢. I actually have two versions of it. A normal one and a special one with a shadow-effect. Is it possible that the normal one morphs into the special one when the cursor hovers over it? --- Zantam03 ( Talk ) 11:04, May 24, 2012 (UTC)


 * There are probably many ways to do that, and other people may be able to tell you a better method. This is what I would do:
 * Create a template like this:

  


 * The width parameter: The width of each image, so they match.
 * The topimg parameter: The name of the image that will fade out.
 * The behindimg parameter: The name of the image that will appear when the other fades.
 * Then in pages you would use it like this:


 * If you want the behindimg to appear immediately as soon as the viewer mouses over the topimg, I recommend using a CSS code like this in the MediaWiki:Wikia.css:


 * Otherwise, if you want the topimg to fade out gradually, I recommend using this JavaScript code in the MediaWiki:Common.js:


 * --Gardimuer { ʈalk } 16:58, May 24, 2012 (UTC)


 * Late reply, but I've finally started to try this. The template is here and the result is here. As you can see, the 'behindimg' is always on top. There is no fading in effect. How can I fix this? --- Zantam03 ( Talk ) 09:56, June 5, 2012 (UTC)


 * Oh I know, that's probably because the top image is transparent.. --- Zantam03 ( Talk ) 10:20, June 5, 2012 (UTC)


 * Ok, I've removed the transparency from the top image, but now it won't fade into the backimage. How come? --- Zantam03 ( Talk ) 10:26, June 5, 2012 (UTC)


 * Oh never mind, I didn't read your text properly :-P It works now (and looks nice imo) Thanks! --- Zantam03 ( Talk ) 10:34, June 5, 2012 (UTC)


 * I'm glad you got it working. :) --Gardimuer { ʈalk } 21:17, June 5, 2012 (UTC)

How can I place them next to each other instead of underneath each other? And how can I make them link to another page? --- Zantam03 ( Talk ) 09:47, June 6, 2012 (UTC)


 * Try adding  to every div element of Template:ImageMorph.


 * And linking image to a page needs  within  . See Documentation.


 * Well, I've added  to the three div elements in the template, but now the effect of the template is gone. Also, when I add   and   I get the text 'File:' and '100px' on screen... --- Zantam03 ( Talk ) 10:43, June 6, 2012 (UTC)


 * I corrected some text misplaced in the template. Now the links are fixed, but for the moment I have not clear idea to fix the text effect, I'm sorry :/


 * Thanks for the partial correction. Hopefully someone else knows how to fix the effect problem. --- Zantam03 ( Talk ) 10:56, June 6, 2012 (UTC)

Perhaps I'm gonna retry this in the sandbox.


 * Oh I got it. You have changed your class from fadeout to fadeout;, that's why you didn't get the effect. I fixed it so now it's fine


 * I think Wikia did that automatically? Because I don't recall adding that myself. I just copied Guardimuer and your codes. Anyway, thanks for the fix. Looks pretty neat! --- Zantam03 ( Talk ) 11:26, June 6, 2012 (UTC)