[CSS]画像のキャプションをいい感じのアニメーションで表示するシンプルなホバーエフェクト

シンプルな実装で、画像のキャプションを美しいグラデーションのパネルにアニメーションで表示するシンプルなホバーエフェクトを紹介します。

Simple Tile Hover Effect

実装してみた

実装は非常に簡単で、カスタマイズも簡単です。
パネルのカラーをピンクに変えて、実装してみました。

寝起きイラスト：Girls Design Materials

イラストは、以前紹介した「Girls Design Materials」です。

• 生き生きとした表情やしぐさが魅力たっぷりなガーリー素材

実装

Step 1: HTML

画像とキャプション（見出しとテキスト）をセットに、a要素で括り、全体をdiv要素で内包します。

<div class="tiles">
	<a href="#" class="tile"><img src="image.jpg"/><div class="details"><span class="title">見出し</span><span class="info">テキスト</span></div></a>
	<a href="#" class="tile"><img src="image.jpg"/><div class="details"><span class="title">見出し</span><span class="info">テキスト</span></div></a>
	<a href="#" class="tile"><img src="image.jpg"/><div class="details"><span class="title">見出し</span><span class="info">テキスト</span></div></a>
	<a href="#" class="tile"><img src="image.jpg"/><div class="details"><span class="title">見出し</span><span class="info">テキスト</span></div></a>
</div>

Step 2: CSS

ホバー時のパネルのカラーは、「.tiles .tile:before」の「background」を変更します。

.tiles .tile {
  display: inline-block;
  margin: 10px;
  text-align: left;
  opacity: .99;
  overflow: hidden;
  position: relative;
  border-radius: 3px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
}
.tiles .tile:before {
  content: '';
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  width: 100%;
  height: 50%;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  -webkit-transition-property: top, opacity;
          transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.tiles .tile img {
  display: block;
  max-width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tiles .tile .details {
  font-size: 16px;
  padding: 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.tiles .tile .details span {
  display: block;
  opacity: 0;
  position: relative;
  top: 100px;
  -webkit-transition-property: top, opacity;
          transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.tiles .tile .details .title {
  line-height: 1;
  font-weight: 600;
  font-size: 18px;
}
.tiles .tile .details .info {
  line-height: 1.2;
  margin-top: 5px;
  font-size: 12px;
}
.tiles .tile:hover:before,
.tiles .tile:hover span {
  opacity: 1;
}
.tiles .tile:hover:before {
  top: 50%;
}
.tiles .tile:hover span {
  top: 0;
}
.tiles .tile:hover .title {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.tiles .tile:hover .info {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}

下記のデモページでは、コードを編集していろいろ試すこともできます。

Simple Tile Hover Effect