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)