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*/
![[CSS3] マウスオーバーでリンク画像の透明度とかを変更する](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)