css マウスオーバー時の画像の半透明化

2012/04/22
画像に対して「opacity」を指定する。ブラウザごとに解釈が違うので各ブラウザ用の記述も用意する。

記述例

イメージリンクで、マウスオーバー時に不透明度50%にする

  1. <style type="text/css">
  2. a:hover img
  3. {
  4.   filter:alpha(opacity=50);
  5.   -moz-opacity:0.50;
  6.   opacity:0.50;
  7. }
  8. </style>
  9.  
  10. <a href="#"><img src="○○○○.gif"></a>

イメージリンクで、マウスオーバー時に不透明度0%にする(透明にする)

  1. <style type="text/css">
  2. a:hover img
  3. {
  4.   filter:alpha(opacity=0);
  5.   -moz-opacity:0.00;
  6.   opacity:0.00;
  7. }
  8. </style>
  9.  
  10. <a href="#"><img src="○○○○.gif"></a>

イメージにマウスオーバーしたとき不透明度65%にする

  1. <style type="text/css">
  2. img:hover
  3. {
  4.   filter:alpha(opacity=65);
  5.   -moz-opacity:0.65;
  6.   opacity:0.65;
  7. }
  8. </style>
  9.  
  10. <a href="#"><img src="○○○○.gif"></a>

イメージを不透明度65%にする(マウスオーバーとかは関係なし)

  1. <style type="text/css">
  2. img
  3. {
  4.   filter:alpha(opacity=65);
  5.   -moz-opacity:0.65;
  6.   opacity:0.65;
  7. }
  8. </style>
  9.  
  10. <a href="#"><img src="○○○○.gif"></a>

※「img:hover{}」ではなく「img{}」にする

新着(ニュース関連以外)

2018-05-16
PHPで画像のヘッダ情報(?)の「Orientation」を元に画像回転させたい。
2018-03-05
Android Studioをインストール。エミュレータを軽くするトコまで終わらせたかったけど、挫折した。
2018-02-23
プッシュ通知について調べてた時にでてきたServiceWorker。そのServiceWorkerについてのメモ。
2017-12-13
jqueryで取得したDOM要素をオブジェクトじゃなくて、配列で受け取りたい
2017-11-30
Xampp+FuelPHP1.8をサーバーにupしたらエラーになった。