Image Widget さんでホーバー

ハイどうも~
Image Widget さんでホーバーさせたい時のコードです。

駆け足で行きます。

其一:css

#sidebar .widget-content.widget_sp_image {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
	overflow: hidden;
}

opacity を0にしておくことで後で各 jQuery で高さ出す時にぴゃってならないように。

其ノ二:js

jQuery(document).ready(function($) {
	$(window).load(function() {
		if ($("#sidebar .widget_sp_image").size() > 0) {
			$("#sidebar .widget_sp_image").each(function(){
				var h = $('img',this).height() / 2;
				$(this).height(h);
				$(this).animate({opacity:'1'}, 250);
			});
			$("#sidebar .widget_sp_image img").hover( function () {
				var h = $(this).height() / 2;
				$(this).css({"margin-top": -h});
			}, function () {
				$(this).attr('style','');
			});
		}
	});
});

#sidebar は自分の環境に合わせてください。
で多分いけるかと思います。
出来なかったらすみません。

追記:
画像は上下に 普通のとホバーした時のをで一枚画像で保存してください。