[CSS]画像にかっこいいアニメーションでオーバーレイのメッセージを表示するスタイルシート

CSSで作成したイメージスライダーに、ホバー時にメッセージを半透明のパネルに表示するチュートリアルを紹介します。

Build an Awesome CSS Slider With Four Overlays

[ad#ad-2]

• デモ
• 実装

デモ

デモはCSS3アニメーションを使用しているので、Firefox, Chrome, Safariでご覧ください。

デモページ

画像をホバーすると、4枚のメッセージパネルがフェードのアニメーションで表示されます。

デモページ

イメージスライダー自体もキーフレームを使った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で表示します。

.slider {
  height: 400px;
  width: 800px;
  background: url(http://lorempixum.com/800/400/sports/8);
  border-radius: 20px;
  overflow: hidden;
  margin: 50px auto;
 
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
  box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

各パネルのデフォルトのスタイルを設定します。
背景やカラーを透明な状態にしておきます。

.panel {
  width: 200px;
  height: 400px;
  background: transparent;
  color: transparent;
  float: left;
  overflow: hidden;
 
  -webkit-transition: color 0.5s ease, background-color 0.5s ease;
  -moz-transition: color 0.5s ease, background-color 0.5s ease;
  -o-transition: color 0.5s ease, background-color 0.5s ease;
  -ms-transition: color 0.5s ease, background-color 0.5s ease;
  transition: color 0.5s ease, background-color 0.5s ease;
}

パネルのホバー時には背景やカラーにカラーを与え、見えるようにします。

.panel:hover {
  background: #000; /*for old browsers*/
  background: rgba(0,0,0,0.8);
  color: #fff;
}

イメージスライダーの画像アニメーションのスタイルです。
背景の複数の画像をセットするマルチプルバックグランドを使用し、キーフレームを使って座標を変更します。

.slider {
  height: 400px;
  width: 800px;
  background: url(http://lorempixum.com/800/400/sports/8), url(http://lorempixum.com/800/400/sports/2), url(http://lorempixum.com/800/400/sports/3), url(http://lorempixum.com/800/400/sports/8);
  background-position: 0px 0px, 800px 0px, 1600px 0px, 3200px 0px;
  background-repeat: no-repeat;
  border-radius: 20px;
  overflow: hidden;
  margin: 50px auto;
 
  -webkit-animation: slider 15s infinite;
  -moz-animation: slider 15s infinite;
  -ms-animation: slider 15s infinite;
  -o-animation: slider 15s infinite;
  animation: slider 15s infinite;
 
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
  box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}