[CSS]マウスのフォーカスで、画像の上にアイコンを表示するスタイルシート

Post on:2009年4月15日

sponsors

画像にマウスをフォーカスすると、画像の上にアイコンを表示するスタイルシートをJanko At Warp Speedから紹介します。

アイコンを表示する仕組みは、画像の上に空spanを配置し、hover時に「display:block;」を適用するものです。

また、空spanを最初から配置しない代わりに、スクリプト（jQuery）を使用し、フェードのアニメーションを伴ってアイコンを表示するサンプルも紹介されています。
demo（下段）