CSSのopacityを使ってマウスオーバー時に半透明のアイコンを作成する方法 - DOしよーかな

アイコンなどマウスオーバー時に画像がかわるとなんかイイかなぁと思って作ってみました。CSSだけで簡単にできる方法を紹介します。 CSSのopacityを使って画像を半透明にします。それをマウスオーバー時に半透明にしたいのでhoverを使います。その方法を書きました。 作りたいのはこんな感じ マウスオーバー時に半透明にしてアイコンをスルーしてることをわかりやすくなりますね。 opacityを使う マウスオーバー時に画像を変えるには２つの画像を用意しなくてはならないのですが、１枚の画像でCSSだけでもこれに似たことができます。これはとても簡単です。 画像を２枚用意するのではなくて画像を半透明にします。 CSSで半透明にするプロパティを使用します。 opacity: 値 ; 値（0.0～１.0） 透明度の数値が高いほうが色が濃いです。 CSS3からはopacityだけでどのブ