CSS・HTML Factory

少しでもお役に立てれば。

HOME>ホバーキャプション1>ホバーキャプション2>ホバーキャプション3>次へ

CSSを使って作成するキャプションエフェクトを紹介しています。
メニューやバナーなどに使えたら嬉しいです。
コピペするだけですので、そんなに難しくないと思います。

キャプションエフェクト3

マウスホバー(上に乗せる)で斜め回転しながら表示

Caption Title

caption text here ...

画像にマウスホバー(上に乗せる)すると画像全体に被るようにマスクとキャプションが斜めに回転しながら表示されます。 実装にはCSSを以下のように記述します。

HTML
CSS

マウスホバー(上に乗せる)でマスクとキャプションの表示タイミングをずらす

Caption Title

caption text here ...

画像にマウスホバー(上に乗せる)するとまず画像全体に被るようにマスクが表示され、その後少し遅れてキャプションが左から流れて入ってくるものです。 実装にはCSSを以下のように記述します。

HTML
CSS

マウスホバー(上に乗せる)で扉がしまるような表示

Caption Title

caption text here ...

画像にマウスホバー(上に乗せる)するとまず画像全体に扉が閉まるような感じでマスクが被り、その後少し遅れてキャプションが表示されるものです。 実装にはHTMLとCSSを以下のように記述します。

HTML
CSS

マウスホバー(上に乗せる)で全体がフリップ

Caption Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

画像にマウスホバー(上に乗せる)するとフリップされてキャプションが表示されるものです。 実装にはHTMLとCSSを以下のように記述します。

HTML