ロールオーバーで画像を半透明にするシンプルな方法

ボタンや画像などで「ロールオーバーした時に画像を半透明にしたい！」そんなときの簡単な方法をご紹介します。かなり単純なことなので、扱いやすいかと思います。

まずは、デモサンプルを確認してみてください。

DEMO

すべての画像に対して半透明にする場合

リンクの貼られたすべての画像ということで「a:hover img」に対して「半透明（0.5）」という指定になります。この（0.5）の部分が透明度具合を指定するので、うっすら透明にしたいときは（0.8）程度にするのが良いと思います。あわせて下のプレフィックスなども「opacity=80」というように書き換えてください。

また、すべて同じ透明度にするのではなく、「透明にしないボタン」と「90％透明にするボタン」などを混在させたい場合は以下のような指定にします。

HTML

img要素に対して「class=”op”」などの名前を付けます。

CSS

img.opというように特定の画像に対してだけの指定を記述します。

 

そうすることで、それぞれに違った透明度で表現することができます。

至ってシンプルな方法なので試してみてください。