自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。
画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。
キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。

共通のHTML・CSS

一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。

<figure>
  <img src="image.jpg" />
  <figcaption>
    <h3>Caption Title</h3>
    <p>caption text here ...</p>
  </figcaption>
</figure>

CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3pの見栄えに関するフォントサイズやカラーなどの記述は省いているものになります。

また、ここでの動きの紹介にはそれぞれアニメーションGIFを使用しているので、実際の動きや表示は以下デモページで確認できます。

全体にマスクをかける

全体にマスクをかけるの実装イメージ

画像にホバーすると全体にマスクがかかり、同時にキャプションも表示されます。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
  overflow: hidden;
  width: 300px;
}
figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
}
figure:hover figcaption {
  opacity: 1;
}

上から表示

上から表示の実装イメージ

画像にホバーすると上から画像全体に被るようにマスクとキャプションが降りてきます。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
  overflow: hidden;
  width: 300px;
}
figcaption {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 1;
}
figure:hover figcaption {
  top: 0;
  left: 0;
}

今回は上からの場合ですが、topbottomに変更すれば下から表示されるものに変更できます。

左から表示

左から表示の実装イメージ

先ほどとほとんど記述は変わらず、topleftの値を変更することで画像にホバーすると左から画像全体に被るようにマスクとキャプションが表示されます。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
  overflow: hidden;
  width: 300px;
}
figcaption {
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 1;
}
figure:hover figcaption {
  top: 0;
  left: 0;
}

今回は左からの場合ですが、leftrightに変更すれば右から表示されるものに変更できます。

左上から表示

左上から表示の実装イメージ

こちらもほとんど記述は変わらず、topleftの値を変更することで画像にホバーすると左上から画像全体に被るようにマスクとキャプションが表示されます。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
  overflow: hidden;
  width: 300px;
}
figcaption {
  position: absolute;
  top: -100%;
  left: -100%;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 1;
}
figure:hover figcaption {
  top: 0;
  left: 0;
}

今回は左上からの場合ですが、topleftの部分を変更すれば右上や左下から表示されるものにも変更できます。

奥から回転しながら表示

奥から回転しながら表示の実装イメージ

画像にホバーすると奥から画像全体に被るようにマスクとキャプションが表示されます。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
  overflow: hidden;
  width: 300px;
}
figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transform: rotate(90deg) scale(0);
  transform: rotate(90deg) scale(0);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
}
figure:hover figcaption {
  -webkit-transform: rotate(360deg) scale(1);
  transform: rotate(360deg) scale(1);
  opacity: 1;
}

手前から回転しながら表示

手前から回転しながら表示の実装イメージ

先ほどとほとんど記述は変わらず、scaleの値を変更することで画像にホバーすると手前から画像全体に被るようにマスクとキャプションが表示されます。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
  overflow: hidden;
  width: 300px;
}
figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transform: rotate(90deg) scale(3);
  transform: rotate(90deg) scale(3);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
}
figure:hover figcaption {
  -webkit-transform: rotate(360deg) scale(1);
  transform: rotate(360deg) scale(1);
  opacity: 1;
}

縦回転しながら表示

縦回転しながら表示の実装イメージ

画像にホバーすると画像全体に被るようにマスクとキャプションが縦回転で表示されます。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
  overflow: hidden;
  width: 300px;
}
figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
  -webkit-transition: .5s;
  transition: .5s;
  opacity: 0;
}
figure:hover figcaption {
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
  opacity: 1;
}

横回転しながら表示

横回転しながら表示の実装イメージ

先ほどとほとんど記述は変わらず、transformの値をrotateYに変更することで画像にホバーすると画像全体に被るようにマスクとキャプションが横回転で表示されます。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
  overflow: hidden;
  width: 300px;
}
figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transition: .5s;
  transition: .5s;
  opacity: 0;
}
figure:hover figcaption {
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
  opacity: 1;
}

斜め回転しながら表示

斜め回転しながら表示の実装イメージ

画像にホバーすると画像全体に被るようにマスクとキャプションが斜めに回転しながら表示されます。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
  overflow: hidden;
  width: 300px;
}
figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transform: rotateY(-90deg) rotateX(-90deg);
  transform: rotateY(-90deg) rotateX(-90deg);
  -webkit-transition: .5s;
  transition: .5s;
  opacity: 0;
}
figure:hover figcaption {
  -webkit-transform: rotateY(0) rotateX(0);
  transform: rotateY(0) rotateX(0);
  opacity: 1;
}

マスクとキャプションの表示タイミングをずらす

マスクとキャプションの表示タイミングをずらすの実装イメージ

画像にホバーするとまず画像全体に被るようにマスクが表示され、その後少し遅れてキャプションが左から流れて入ってくるものです。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
  overflow: hidden;
  width: 300px;
}
figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
}
figcaption h3,
figcaption p {
  position: absolute;
  left: -100%;
  width: 260px;
  -webkit-transition: .3s;
  transition: .3s;
}
figcaption h3 {
  top: 30px;
}
figcaption p {
  top: 75px;
}
figure:hover figcaption {
  opacity: 1;
}
figure:hover figcaption h3,
figure:hover figcaption p {
  left: 20px;
}
figure:hover figcaption h3 {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
figure:hover figcaption p {
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
}

キャプションの表示タイミングを変更したい場合は、h3pに指定してあるtransition-delayの値をそれぞれ変更することで早くしたり遅くしたりできます。
また、今回はキャプションが左から流れてくるようにしていますが、その動きが余計であればposition: absolute;等の記述を消去すればキャプションの表示タイミングがずれているだけのものにできます。

扉が閉まるような表示

扉が閉まるような表示の実装イメージ

画像にホバーするとまず画像全体に扉が閉まるような感じでマスクが被り、その後少し遅れてキャプションが表示されるものです。
実装にはHTMLとCSSを下記のように記述します。

<figure>
  <div><img src="image.jpg" /></div>
  <figcaption>
    <h3>Caption Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </figcaption>
</figure>
figure {
  position: relative;
  width: 300px;
  -webkit-perspective: 1500px;
  perspective: 1500px;
  -webkit-perspective-origin: 0 50%;
  perspective-origin: 0 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
figure div {
  overflow: hidden;
}
figcaption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 0;
  transform-origin: 0;
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
  -webkit-transition: -webkit-transform .4s, opacity .1s .3s;
  transition: transform .4s, opacity .1s .3s;
  opacity: 0;
}
figcaption h3,
figcaption p {
  text-align: left;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  opacity: 0;
}
figure:hover figcaption {
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
  -webkit-transition: -webkit-transform .4s, opacity .1s;
  transition: transform .4s, opacity .1s;
  opacity: 1;
}
figure:hover figcaption h3,
figure:hover figcaption p {
  -webkit-transition-delay: .4s;
  transition-delay: .4s;
  opacity: 1;
}

全体がフリップ

全体がフリップの実装イメージ

画像にホバーするとフリップされてキャプションが表示されるものです。
実装にはHTMLとCSSを下記のように記述します。

<figure>
  <div class="figure-inner">
    <div class="image"><img src="image.jpg" /></div>
    <figcaption>
      <h3>Caption Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </figcaption>
  </div>
</figure>
.figure-inner {
  position: relative;
  width: 300px;
  -webkit-perspective: 1000;
  perspective: 1000;
  width: 300px;
  height: 200px;
  -webkit-transition: .5s;
  transition: .5s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.image,
figcaption {
  position: absolute;
  width: 300px;
  height: 200px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.image {
  z-index: 2;
}
figcaption {
  background: #fff;
  border: 2px solid #666;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
figure:hover .figure-inner,
figcaption {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

下から少しだけ表示

下から少しだけ表示の実装イメージ

画像にホバーすると下から少しだけマスクとキャプションを表示させます。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
  overflow: hidden;
  width: 300px;
}
figcaption {
  position: absolute;
  bottom: -60px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 60px;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
}
figure:hover figcaption {
  bottom: 0;
}

今回は下からの場合ですが、bottomの記述をそれぞれtopに変更すれば上からのものに変更できます。

マウスオーバーでキャプション非表示

マウスオーバーでキャプション非表示の実装イメージ

こちらは今までのものとは違ってキャプションが予め表示されており、画像にホバーするとキャプションが隠れるというものになります。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
  overflow: hidden;
  width: 300px;
}
figcaption {
  position: absolute;
  bottom: 30px;
  right: 40px;
  z-index: 2;
  width: 100%;
  height: 60px;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
}
figure:hover figcaption {
  right: 100%;
}

上下から少しだけ表示

上下から少しだけ表示の実装イメージ

画像にホバーすると上下から少しだけマスクとキャプションを表示させるもので、今回の場合は上からはh3を、下からpを表示させています。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
  overflow: hidden;
  width: 300px;
}
figcaption h3,
figcaption p {
  position: absolute;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
}
figcaption h3 {
  top: -40px;
}
figcaption p {
  bottom: -40px;
}
figure:hover figcaption h3 {
  top: 0;
}
figure:hover figcaption p {
  bottom: 0;
}

画像を押し出す #1

画像を押し出す #1の実装イメージ

画像にホバーすると画像が上に押し出されるようにずれて、下にあるキャプションが表示されるというものになります。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
  overflow: hidden;
  width: 300px;
}
figure img {
  position: relative;
  z-index: 2;
  -webkit-transition: .3s;
  transition: .3s;
}
figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100px;
  background: #46ceb4;
  -webkit-transition: .3s;
  transition: .3s;
}
figure:hover img {
  -webkit-transform: translateY(-100px);
  transform: translateY(-100px);
}

画像を押し出す #2

画像を押し出す #2の実装イメージ

こちらも先ほどのものと同様で画像にホバーすると画像が上に押し出されるようにずれて、下からキャプションが表示されるというものになります。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
  overflow: hidden;
  width: 300px;
  background: #46ceb4;
}
figure img {
  position: relative;
  z-index: 1;
  -webkit-transition: .3s;
  transition: .3s;
}
figcaption {
  position: absolute;
  bottom: -70px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 70px;
  background: #46ceb4;
  -webkit-transition: .3s;
  transition: .3s;
}
figure:hover img {
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
}
figure:hover figcaption {
  bottom: 0;
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
}

画像を押し出す #3

画像を押し出す #3の実装イメージ

こちらも画像にホバーすると画像が押し出されるようにずれるタイプですが、画像が上ではなく左にずれるタイプで、キャプションは右から表示されるというものになります。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
  overflow: hidden;
  width: 300px;
  background: #46ceb4;
}
figure img {
  position: relative;
  z-index: 1;
  -webkit-transition: .3s;
  transition: .3s;
}
figcaption {
  position: absolute;
  bottom: 0;
  right: -170px;
  z-index: 2;
  width: 170px;
  height: 100%;
  background: #46ceb4;
  -webkit-transition: .3s;
  transition: .3s;
}
figure:hover img {
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
}
figure:hover figcaption {
  right: 0;
  -webkit-transform: translateX(-30px);
  transform: translateX(-30px);
}

画像下に表示 #1

画像下に表示 #1の実装イメージ

こちらは今までのものとは違ってマスクなしで、ホバーすると画像下にキャプションが表示されるというものになります。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
  width: 300px;
}
figure img {
  position: relative;
  z-index: 2;
}
figure h3,
figure p {
  position: absolute;
  bottom: 0;
  left: 10px;
  z-index: 1;
  opacity: 0;
  -webkit-transition: .3s;
  transition: .3s;
}
figure:hover h3 {
  bottom: -35px;
  opacity: 1;
}
figure:hover p {
  bottom: -58px;
  opacity: 1;
}

画像下に表示 #2

画像下に表示 #2の実装イメージ

先後も先ほどのものと同様でマスクなしで、ホバーすると画像下にキャプションが表示されるというものになりますが、h3pが表示されるタイミングをtransition-delayを用いてずらしています。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
  width: 300px;
}
figure img {
  position: relative;
  z-index: 2;
}
figure h3,
figure p {
  position: absolute;
  z-index: 1;
  opacity: 0;
  -webkit-transition: .3s;
  transition: .3s;
}
figure h3 {
  bottom: -35px;
  left: 0;
  font-size: 18px;
}
figure p {
  bottom: -33px;
  right: 0;
}
figure:hover h3 {
  opacity: 1;
}
figure:hover p {
  opacity: 1;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}

以上、CSSのみで実装するキャプションエフェクトのサンプルでした。
ここで紹介したのはいずれもシンプルなものでしたが、他の動きやより動きをつけたい場合は以下で紹介されているのものが参考になります。