HOME>ホバーキャプション１>ホバーキャプション２>ホバーキャプション３>次へ
ＣＳＳを使って作成するキャプションエフェクトを紹介しています。
メニューやバナーなどに使えたら嬉しいです。
コピペするだけですので、そんなに難しくないと思います。
キャプションエフェクト１
マウスホバー（上に乗せる）で全体にマスクがかかる
Caption Title
caption text here ...
画像にマウスホバー（上に乗せる）すると全体にマスクがかかり、同時にキャプションも表示されます。 実装にはCSSを以下のように記述します。
ＨＴＭＬ
ＣＳＳ
マウスホバー（上に乗せる）で上から表示
Caption Title
caption text here ...
画像にマウスホバー（上に乗せる）すると上から画像全体に被るようにマスクとキャプションが降りてきます。 実装にはCSSを以下のように記述します。
ＨＴＭＬ
ＣＳＳ
マウスホバー（上に乗せる）で左から表示
Caption Title
caption text here ...
先ほどとほとんど記述は変わらず、topとleftの値を変更することで、画像にマウスホバー（上に乗せる）すると左から画像全体に被るようにマスクとキャプションが表示されます。 実装にはCSSを以下のように記述します。
ＨＴＭＬ
ＣＳＳ
マウスホバー（上に乗せる）で左上から表示
Caption Title
caption text here ...
こちらもほとんど記述は変わらず、topとleftの値を変更することで、画像にマウスホバー（上に乗せる）すると左上から画像全体に被るようにマスクとキャプションが表示されます。 実装にはCSSを以下のように記述します。
ＨＴＭＬ
ＣＳＳ