[CSS3] マウスオーバーでリンク画像の透明度とかを変更する

JavaScript版があるのでCSS版も書いておく。
この手法はマウスオーバー画像用意しなくていいから重宝する。

CSS3対応しているブラウザであれば、transitionプロパティでJavaScript版と同じようなフェーディング効果をつけることができる。
っていうサンプルだけじゃあれなので、クリック効果とアウトライン消しをつけてみた。

a {
	outline:none;
}
a img{
	position:relative;
	-webkit-transition:opacity 0.5s; /*Safari,Chrome*/
	-o-transition       :opacity 0.5s; /*Opera*/
	-moz-transition   :opacity 0.5s; /*Firefox*/
	transition           :opacity 0.5s; /*CSS3 Real Property*/
}
a:focus img,
a:hover img {
	filter:alpha(opacity=50); /*IE*/
	-moz-opacity:0.5; /*Older Firefox*/
	opacity:0.5; /* Modern Browsers*/
}
/* 押したとき */
a:active img {
	top:1px;
	left:1px;
}

今の所transitionに対応してるのはWebkitだけなので、他はおまじないみたいなもんです。
なおCSS Tricksによると、-mozとか-webkitとかのブラウザ依存のプロパティよりも後に
CSS3の本来のプロパティを書いた方がいいらしい。

aをブロックかインラインブロックにして背景をつけておくと、マウスオーバーでちょっと色を変えたり出来る。

a {
	display:inline-block;
	background-color: #000;
}

ちょっとひねったりもできる。

a:focus img,
a:hover img {
	-moz-transform: skewY(-5deg);
	-webkit-transform: skewY(-5deg);
	transform: skewY(-5deg);
}