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