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