マウスオーバー 【マウスオーバー】CSSのみで画像内にキャプションを表示
マウスオーバーで画像内にキャプションを表示し、マウスアウトでキャプションを非表示する動作のサンプルです。CSSのみで実装し、フェードイン・フェードアウトはtransitionを利用します。
マウスオーバー
マウスオーバー 
マウスオーバー 【マウスオーバー】CSSのobject-fitとofi.min.jsで画像の表示領域サイズ固定に対応
サムネイル画像をマウスオーバーするとメイン画像が表示されます。同様にキャプションのテキストも差し代わります。メイン画像の表示領域をサイズ固定で正方形にした場合の対応です。画像にはCSSのobject-fitを設定し、object-fit未対応のIE11用にofi.min.jsを利用します。
マウスオーバー 【マウスオーバー】画像をマウスオーバーで反転させてテキスト表示
画像をマウスオーバーすると画像が反転してキャプションのテキストが表示されます。スマホ表示では単純なリンクの画像にします。CSS3のbackface-visibility: hiddenを利用し、htmlとCSSのみで実装します。
マウスオーバー 【マウスオーバー】画像の縦スクロール表示
縦長の画像をマウスオーバーすると表示していない部分を縦スクロールで表示します。マウスアウトで画像の一番上に戻ります。
マウスオーバー 【マウスオーバー】画像をマウスオーバーでメニューを表示
画像をマウスオーバーすると画像の中央から飛び出すようにメニューが表示されます。スマホ表示では単純なリンクの画像にします。htmlとCSSのみで実装します。
マウスオーバー 【マウスオーバー】サムネイル画像のマウスオーバーでメイン画像を表示【表示領域サイズ固定の場合】
サムネイル画像をマウスオーバーするとメイン画像が表示されます。同様にキャプションのテキストも差し代わります。メイン画像の表示領域をサイズ固定で正方形にした場合の対応です。
マウスオーバー 【マウスオーバー】ナビゲーションのテキストリンクを移動する下線【PCサイト用】
ナビゲーションのテキストリンクに現在位置を示す下線を表示します。テキストリンクをマウスオーバーすると下線がアニメーションで移動し、マウスアウトで戻ります。
マウスオーバー 【マウスオーバー】ヘッダーのグローバルナビゲーション展開【PCサイト用】
PCサイトでヘッダーのグローバルナビゲーションをマウスオーバーするとサブナビゲーションが展開します。透過の背景色の上にナビゲーションを配置して見やすくしています。
マウスオーバー 【マウスオーバー】サムネイル画像のマウスオーバーでメイン画像を表示
サムネイル画像をマウスオーバーするとメイン画像が表示されます。同様にキャプションのテキストも差し代わります。
マウスオーバー 【マウスオーバー】画像・背景画像をマウス操作に合わせて動かすプラグイン【jquery.parallax.js】
画像や背景画像をマウス操作に合わせて動かすことができるプラグイン、jquery.parallax.jsを利用します。移動幅や移動スピードの設定も可能です。