マウスオーバーで画像の表示と非表示を任意に切り替えるCSS

初期状態では画像が隠れていて、マウスオーバーしたときだけ見える…という袋とじっぽい効果が欲しかったのでCSSで作りました。

JavaScript 使わずに実装出来るので、使いどころを定めればそれなりに便利だと思います。

出落ちっぽいネタページにお使い頂ければ幸いです！(・∀・)

マウスオーバーやタップで画像が現れるCSSエフェクト

何もないところ（実際は画像）にマウスオーバー（またはモバイル端末では指定範囲のタップ）すると画像が現れる効果をCSSで作ります。

外側を DIV で囲わなくても画像に直接 class 指定して動くので、汎用に使えるのではないかと思います。

デモ

下の枠内にマウスポインタを合わせて下さい。モバイル端末では枠内をタップします。

CSSコード

【HTML】
<img src="example.jpg" class="disappear" />


【CSS】
.disappear{
  filter: alpha(opacity=0);
  -moz-opacity:0;
  opacity:0;
}
.disappear:hover{
  filter: alpha(opacity=100);
  -moz-opacity:1;
  opacity:1;
}


サイドバーなどで良く見かける「マウスオーバーでアイキャッチ画像が光ったように見えるアルファフィルタ」を逆にかけています。

サンプルでは判りやすいように枠線付けてますが、実際は何もないように見せることも可能です。積極的に隠す意図がなければ、 opacity の値を調整して うっすら透けたように見せるのも手でしょう。

モバイルだとタップになってしまうので少し使い勝手が落ちるんですが、出オチネタを書くときなどにどうぞ。

テキストでも

ちなみにテキストでも同じことが出来ます。テキストサイトっぽい遊びをするときにインタラクティブで良いんじゃないでしょうか。

映画のネタバレを書くときとかにも使えそうですね。　← ココ

エフェクト掛けたいテキストを <SPAN> タグなり <P> タグで囲ってクラス割り振ればOKです。

【HTML】
<span class="veil">マウスオーバーで変わるテキスト</span>

マウスオーバーやタップで画像が消えるCSS

指定を逆にするとマウスオーバーで画像が消えるパニックモード（ボス来たスイッチ）的な効果を作ることも出来ます。特にそういう意図はないんですけど。

デモ

下の画像にマウスポインタを合わせるか、モバイル端末では画像内をタップして下さい。

CSSコード

【HTML】
<img src="example.jpg" class="cover" />


【CSS】
.cover{
  filter: alpha(opacity=100);
  -moz-opacity:100;
  opacity:100;
}
.cover:hover{
  filter: alpha(opacity=0);
  -moz-opacity:0;
  opacity:0;
}


このとき、hover で画像の表示 (display) そのものを消すとPC向け表示にしたときガクガクが発生するので注意します。

テキストでも

こちらもテキスト版を載せておきます。　← ココ

こちらも同様に <SPAN> タグなり <P> タグで囲ってクラス割り振って下さい。

【HTML】
<span class="cover">マウスオーバーで変わるテキスト</span>

おわりに

アイキャッチ画像をタップしたら、かわいいマウスカーソルが消えてくれると思った？

穿いてますよ。 ［とにかく明るい安村］

いや、まぁ cursor: crosshair; とかすると割と見え…って、違うか。すみません。