Hello all,

On Wikimedia I noticed some buttons have a nice highlighting effect. For example on this page, 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:

$(function() {
	$('div.fadein img').css('opacity','0.7');
	$('div.fadein img').mouseover(function() {
		$(this).animate({opacity:1},800);
	}).mouseout(function() {
		$(this).animate({opacity:0.7},800);
	});
});

--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.--Noemon ^*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:

<div style="width:{{{width|}}}">
     <div class="fadeout" style="position:absolute; width:{{{width|}}}">[[File:{{{topimg|}}}|{{{width|}}}]]</div>
     <div style="width:{{{width|}}}">[[File:{{{behindimg|}}}|{{{width|}}}]]</div>
</div>

• 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:

{{Templatename
|width    = 250px
|topimg   = Example-link2.png
|behindimg= Example-link.png
}}

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:

.fadeout img:hover{ opacity:0;}

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

$(document).ready(function() {
	$('div.fadeout img').mouseenter(function(){
		$(this).animate({opacity:0},800);
	}).mouseleave(function(){
		$(this).animate({opacity:1},800);
	});
});

--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 display: inline-block; to every div element of Template:ImageMorph.  Cafeinlove ^msg 18:55, 2012-06-06 (UTC+9)

And linking image to a page needs link=page name within [[File:]]. See Documentation.  Cafeinlove ^msg 19:01, 2012-06-06 (UTC+9)

Well, I've added display: inline-block; to the three div elements in the template, but now the effect of the template is gone. Also, when I add [[File:]] and link=page name 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 :/  Cafeinlove ^msg 19:54, 2012-06-06 (UTC+9)

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

(Reset indent) Perhaps I'm gonna retry this in the sandbox.  Cafeinlove ^msg 19:59, 2012-06-06 (UTC+9)

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  Cafeinlove ^msg 20:05, 2012-06-06 (UTC+9)

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)