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