[CSS]画像にかっこいいアニメーションでオーバーレイのメッセージを表示するスタイルシートCSSで作成したイメージスライダーに、ホバー時にメッセージを半透明のパネルに表示するチュートリアルを紹介します。 デモページ イメージスライダー自体もキーフレームを使ったCSSアニメーションで実装されています。 [ad#ad-2] 実装 実装のポイントだけピックアップ。 HTML メッセージの見出しとパラグラフをdiv要素で内包し、さらにa要素で内包したものを1コンテンツとして、スライダーを実装します。 画像はそれぞれの背景として配置します。 <div class="slider"> <a href="#"> <div class="panel"> <h2>One</h2> <p>Lorem ipsum dolor sit amet...</p> </div> </a> ... </div> CSS まずは、スライダー自体のスタイルです。 画像をbackgroundで表示します。 .sli
