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