マウスホバーでリンク画像を不透明にする

2013年03月18日

画像にマウスを乗せると半透明になる、ちょっとオシャレな気がする感じの実装をする必要があったのでメモがてら。

何となくIEは出来ないんじゃないかと思ってたらちゃんと出来るんですね。変な方向に融通の利く子です。

※ただし、IE6はaタグにしか:hoverとかが効かなかったから対応ブラウザはIE7以降だと思います。

普通にopacityを使う

今どきのCSSer(こんな呼び方があるかどうかは知らん)ならこんな感じで透過すると思うんです。

html
<a href="#" class="hoverAlpha60">
  <img src="/img/test.gif" />
</a>

scss
.hoverAlpha80 {
  &:hover,&:active,&:focus {
    img {
      opacity: 0.8;
    }
  }
}

IE対応にフィルターを使う

最初に言ったとおり、これだけではIEには効きません。予想通りな子!なので、IEの独自フィルターを使います。

scss
.hoverAlpha80 {
  &:hover,&:active,&:focus {
    img {
      opacity: 0.8;
      filter: alpha(opacity=80); // IE6,7
      -ms-filter: "alpha( opacity=80 )"; //IE8
      zoom: 1;
    }
  }
}

サンプル



僕が実装したケースだと「filter: alpha(opacity=80);」だけでもちゃんと透過されたんですが、調べていたサイトさんではIE8用として「-ms-filter: “alpha( opacity=80 )”;」と、要素に高さを作るために「zoom: 1;」を入れているケースが多かったので一応乗せておきました。

おわりに

最近はこういう便利系classをポンポン増やしていって、最終的には僕CSSフレームワーク的なものを作ってい来たいなぁと思ってます。結局自作の方が何とでもなるものになったりすること、ありますよね。

あと、こういった「classに数値を含んだもの」を作る場合はmixinとかループを組み合わせて上手いこと汎用性を高く出来ると思うので、次に暇があったら試してみたいと思います。

こういう汎用性の高いものをつくろうとしたら、何かとCSSメタ言語(最近はプリプロセッサーって言うのが一般的ですか?)の便利さに直面しますね。

ついでに

ほんとについでですが、今回サンプルで使ってる猫画像はこちらのサービスを使わせてもらいました。

{placekitten}

画像の src にURLとパラメータを指定すれば、指定されたサイズの猫画像が表示される猫ダミー画像サービスです。

受注だと「とりあえず画像はダミーでお願いします」って言われることはよくあると思うので、こういったお茶目が許される場合には僕はよく使ってます。出来れば癒やされながら仕事したいですしね。

他にこんな事も書いてます

FBでコメント

コメント1つ

  1. 久しぶりにブログ更新しましたよー マウスホバーでリンク画像を不透明にする:STACKSTOCK http://t.co/dG5gbuUL8n

トラックバック/ピンバックはありません。