0

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

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

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




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

DEMO

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

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

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

HTML

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

CSS

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

 

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

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