CSSのみで実装するキャプションエフェクト 20

  • Posted on
  • Category : Tips
CSSのみで実装するキャプションエフェクト 20

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

共通のHTML

一部異なっているものもありますが、今回はサンプルとして基本的に以下のようなHTMLを使用しています。

HTML

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

CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3pの見栄えに関する記述(フォントサイズやカラーなど)は省いているものになります。
また、このエントリー内では動きの紹介にそれぞれアニメーションGIFを使用しているので、実際の動きや表示は以下デモページで確認できます。

※ブラウザによっては動きが説明と異なる場合があるので、確認の際はChromeやFirefoxでご覧ください。

CSSのみで実装するキャプションエフェクト 20 目次

  1. 全体にマスクをかける
  2. 上から表示
  3. 左から表示
  4. 左上から表示
  5. 奥から回転しながら表示
  6. 手前から回転しながら表示
  7. 縦回転しながら表示
  8. 横回転しながら表示
  9. 斜め回転しながら表示
  10. マスクとキャプションの表示タイミングをずらす
  11. 扉が閉まるような表示
  12. 全体がフリップ
  13. 下から少しだけ表示
  14. マウスオーバーでキャプション非表示
  15. 上下から少しだけ表示
  16. 画像を押し出す #1
  17. 画像を押し出す #2
  18. 画像を押し出す #3
  19. 画像下に表示 #1
  20. 画像下に表示 #2

1. 全体にマスクをかける

1. 全体にマスクをかける

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

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;
}

実際の動きは以下で確認できます。

目次へ

2. 上から表示

2. 上から表示

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

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に変更すれば下から表示されるものに変更できます。
実際の動きは以下で確認できます。

目次へ

3. 左から表示

3. 左から表示

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

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に変更すれば右から表示されるものに変更できます。
実際の動きは以下で確認できます。

目次へ

4. 左上から表示

4. 左上から表示

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

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の部分を変更すれば右上や左下から表示されるものにも変更できます。
実際の動きは以下で確認できます。

目次へ

5. 奥から回転しながら表示

5. 奥から回転しながら表示

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

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;
}

実際の動きは以下で確認できます。

目次へ

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

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

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

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;
}

実際の動きは以下で確認できます。

目次へ

7. 縦回転しながら表示

7. 縦回転しながら表示

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

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;
}

実際の動きは以下で確認できます。

目次へ

8. 横回転しながら表示

8. 横回転しながら表示

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

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;
}

実際の動きは以下で確認できます。

目次へ

9. 斜め回転しながら表示

9. 斜め回転しながら表示

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

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;
}

実際の動きは以下で確認できます。

目次へ

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

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

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

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;等の記述を消去すればキャプションの表示タイミングがずれているだけのものにできます。
実際の動きは以下で確認できます。

目次へ

11. 扉が閉まるような表示

11. 扉が閉まるような表示

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

HTML

<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>

CSS

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;
}

実際の動きは以下で確認できます。

目次へ

12. 全体がフリップ

12. 全体がフリップ

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

HTML

<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>

CSS

.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);
}

実際の動きは以下で確認できます。

目次へ

13. 下から少しだけ表示

13. 下から少しだけ表示

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

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に変更すれば上からのものに変更できます。
実際の動きは以下で確認できます。

目次へ

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

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

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

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%;
}

実際の動きは以下で確認できます。

目次へ

15. 上下から少しだけ表示

15. 上下から少しだけ表示

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

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;
}

実際の動きは以下で確認できます。

目次へ

16. 画像を押し出す #1

16. 画像を押し出す #1

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

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);
}

実際の動きは以下で確認できます。

目次へ

17. 画像を押し出す #2

17. 画像を押し出す #2

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

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);
}

実際の動きは以下で確認できます。

目次へ

18. 画像を押し出す #3

18. 画像を押し出す #3

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

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);
}

実際の動きは以下で確認できます。

目次へ

19. 画像下に表示 #1

19. 画像下に表示 #1

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

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;
}

実際の動きは以下で確認できます。

目次へ

20. 画像下に表示 #2

20. 画像下に表示 #2

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

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のみで実装するキャプションエフェクトのサンプルでした。
間違いや記述漏れはもちろん、「もっと少ない記述で実装できるよ!」とかあれば是非教えてください。

ここで紹介したのはいずれもシンプルなものでしたが、他の動きや更に動きをつけたものにしたい場合などは、以下で紹介されているのものが参考になります。

Back to Top

CSSのみで実装するキャプションエフェクト 20

CSSのみで実装するキャプションエフェクト 20

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。