[CSS]まるでFlashのように画像とキャプションをアニメーションで替えるテクニックいろいろ

画像をホバーすると、小気味良いアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介します。 デモは10種類あり、CSSでここまでできるのか！って感じです。 Original Hover Effects with CSS3 [ad#ad-2] 基本となるHTML 基本となるCSS 必見の10種類のかっこいいデモ 基本となるHTML HTMLは非常にシンプルです。 キャプションはタイトルとテキストをdiv要素で内包しclassに「mask」をつけ、そのキャプションと画像をdiv要素で内包します。 <div class="view"> <img src="image.gif" /> <div class="mask"> <h2>Title</h2> <p>Your Text</p> <a href="#" class="info">Read More</a> </div> </d

[inazuma2073]

IEではことごとく使えないのが惜しい

[goldhead]

最初開いたらChromeが落ちたが、再読込したら動いた。

[otchy210]

「テクニック」と言うけれど、CSS の表現力がここまで高まってくると、あとはアイディアとかセンスだけの問題じゃないかな。「こんな事が出来るんだぜ、スゲーだろ。」はそろそろ卒業する頃合い。

[www-tmcc]

Reader

[Blue-Period]

あとで

[hedeyoshi]

かっこいいけどモデルが怖い。

[Donca]

✔ [CSS]まるでFlashのように画像とキャプションをアニメーションで替えるテクニックいろいろ

[t_krm]

結局IEが足を引っ張ってお遊びで終わってしまう技術。Chromeのエクステンションとかなら使えるかも。

[gentlekoop]

ギミック参考

[yamadar]

Firefox, Safari, Chrome。IEはたぶんIE10までお待ちください

[ueda_kintarou]

クレイジーに聞く

[miso30]

ホバーすると遅延を伴ったアニメーションで、画像を拡大しキャプションが上下からスライドします。

[choromo]

画像をホバーすると、小気味良いアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介します。 デモは10種類あり、CSSでここまでできるのか！って感じです。

[keita_i]

6と9がいい

[flashball]

Flashみたいなソース

[termat]

CSSでここまでできるのか。

[adsty]

画像をホバーするとアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介。

[youhei_nakagawa]

あとで試す。

[crystaline]

css3でアニメーション

[kagioo2uma]

IEなんてなかった

[ebichan3]

CSS3

[vanish_l2]

IEﾜﾛｽ

[warriorking]

(CSS)まるでFlashのように画像とキャプションをアニメーションで替えるテクニックいろいろ | コリス

[kohaku2000]

かなり動きのあるアニメーションが作れます。これは使ってみたいです。

[kadokurarara]

これはすごい。cssアニメーションで画像とキャプションを切り替える。

[hatakazu]

技術

[yoshi-na]

CSS3、スゲェ

[sinfd]

結構使いどころあるかも

[satrex]

興味ある。けど後で見る・・・

[nors]

http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

[asyst]

firefoxだとDEMO5とDEMO10が実用的

[kussun]

リンクホバーで、ここまでできるのか。CSS3 や jQuery の普及で、Webデザインにも「動き」の要素が必須になるから、自分の目で見て経験知として熟成させておきたい。