HOME>ホバーキャプション４>ホバーキャプション５>ホバーキャプション６>次へ
ＣＳＳを使って作成するキャプションエフェクトを紹介しています。
メニューやバナーなどに使えたら嬉しいです。
コピペするだけですので、そんなに難しくないと思います。
キャプションエフェクト４
マウスホバー（上に乗せる）で下から少しだけ表示
Caption Title
caption text here ...
画像にマウスホバー（上に乗せる）すると下から少しだけマスクとキャプションを表示させます。 実装にはCSSを以下のように記述します。
ＨＴＭＬ
ＣＳＳ
マウスホバー（上に乗せる）でキャプション非表示
Caption Title
caption text here ...
こちらは今までのものとは違ってキャプションが予め表示されており、画像にマウスホバー（上に乗せる）するとキャプションが隠れるというものになります。 実装にはCSSを以下のように記述します。
ＨＴＭＬ
ＣＳＳ
マウスホバー（上に乗せる）で上下から少しだけ表示
Caption Title
caption text here ...
画像にマウスホバー（上に乗せる）すると上下から少しだけマスクとキャプションを表示させるもので、今回の場合は上からはh3を、下からpを表示させています。 実装にはCSSを以下のように記述します。
ＨＴＭＬ
ＣＳＳ
マウスホバー（上に乗せる）で画像を下から上に押し出す
Caption Title
caption text here ...
画像にマウスホバー（上に乗せる）すると画像が上に押し出されるようにずれて、下にあるキャプションが表示されるというものになります。 実装にはCSSを以下のように記述します。
ＨＴＭＬ
ＣＳＳ