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