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