on:2012年6月28日sponsorsCSSで作成したイメージスライダーに、ホバー時にメッセージを半透明のパネルに表示するチュートリアルを紹介します。Safariでご覧ください。デモページ画像をホバーすると、4枚のメッセージパネルがフェードのアニメーションで表示されます。デモページイメージスライダー自体もキーフレームを使ったCSSアニメーションで実装されています。実装のポイントだけピックアップ。HTMLメッセージの見出しとパラグラフをdiv要素で内包し、さらにa要素で内包したものを1コンテンツとして、スライダーを実装します。画像はそれぞれの背景として配置します。amet...</p></div></a>...</div>CSSまずは、スライダー自体のスタイルです。画像をbackgroundで表示します。rgba(0,0,0,0.5);}各パネルのデフォルトのスタイルを設定します。背景やカラーを透明な状態にしておきます。ease;}パネルのホバー時には背景やカラーにカラーを与え、見えるようにします。#fff;}イメージスライダーの画像アニメーションのスタイルです。背景の複数の画像をセットするマルチプルバックグランドを使用し、キーフレームを使って座標を変更します。