CSSのみで実装するキャプションエフェクト 20 - NxWorld

自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント

[canna_koritan]

“opacity: 1;”

[lod612]

ホバーアニメーション　キャプション

[tomosuto]

画像を引き立てる色合いとフォントのクリーンさが好み

[tako3ch]

hover

[i_mairy]

Summaryのイメージに使ったら楽しそう

[kenichirou1225]

マウスオーバー時のエフェクトいろいろ（キャプション付き）

[h-a-t-e-h-a-t-e-h-a-t-e-n-a]

オンマウスで切り替わるエフェクト

[hmbd]

CSSでできるサンプルがたくさん　わかりやすい

[godagoda]

エフェクト

[lovedubslove]

優良な情報

[s99e209]

この動きがCSSだけで出来るのか…！

[qrac_jp]

これ使えばよかった！汎用性が高い。

[aiza_wai]

マウスオーダー時のキャプションエフェクトが動き別にまとまっている。

[hr07jp]

“CSSのみで実装するキャプションエフェクト 20”

[z1a2nh]

ﾄﾞﾄﾞｽｺｲ

[raimon49]

CSS transition　動作サンプル付き

[sommertag]

そのうち使いたい(｀･ω･´)

[s56bouya]

めもった！

[ysomtok]

DEMO – Caption Effect 01

[aceraceae]

とりあえず

[peroon]

一番上のがいい。基本は文字情報も最初から表示するけど、売り物だったらこういうトランジション表示でやってもいいかも。値札を見る感じ

[hakurow13notes]

見た目がシンプルで良いっ!!

[se_ino]

CSSのキャプションエフェクト。これはすばらしいなー。メモメモ。

[tominaga]

マウスオーバーで説明を出すやつ

[hiragumo]

ほほう

[Lian]

cool

[mifio]

めも。

[tachib]

マウスオーバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装

[nakagawax]

★