HOME>ホバーキャプション７>ホバーキャプション８>ホバーキャプション９
ＣＳＳを使って作成するキャプションエフェクトを紹介しています。
メニューやバナーなどに使えたら嬉しいです。
コピペするだけですので、そんなに難しくないと思います。
キャプションエフェクト８
横に３６０度回転して画像をマスク
It's sheep !
画像にマウスホバー（上に乗せる）すると横３６０度回転して全体にマスクがかかり、同時にキャプションも表示されます。 実装にはHTMLとCSSを以下のように記述します。
ＨＴＭＬ
ＣＳＳ
上からスライドして画像を押し出す
It's sheep !
画像にマウスホバー（上に乗せる）すると上からスライドしてマスクがかかり、同時にキャプションも表示されます。 実装にはHTMLとCSSを以下のように記述します。
ＨＴＭＬ
ＣＳＳ
左からスライドして画像を押し出す
It's sheep !
画像にマウスホバー（上に乗せる）すると左からスライドしてマスクがかかり、同時にキャプションも表示されます。 実装にはHTMLとCSSを以下のように記述します。
ＨＴＭＬ
ＣＳＳ
右からスライドして画像を押し出す
It's sheep !
画像にマウスホバー（上に乗せる）すると右からスライドしてマスクがかかり、同時にキャプションも表示されます。 実装にはHTMLとCSSを以下のように記述します。
ＨＴＭＬ
ＣＳＳ