マウスオーバーでゆっくりフェードアウト・フェードイン

参考サイト：http://edge.sincar.jp/web/css%EF%BC%9A%E3%82%AA%E3%83%B3%E3%83%9E%E3%82%A6%E3%82%B9%EF%BC%88hover%EF%BC%89%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89/

a img {
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out; 
}
a:hover img {
	opacity: 0.5;
	-webkit-opacity: 0.5;
	-moz-opacity: 0.5;
	filter: alpha(opacity=50);	/* IE lt 8 */
	-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}

a:hoverではなく、a imgにtransitionを設定するのがポイント。