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

Posted on May 20th, 2014
In:Tips
No Comments

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内にあるh3とpの見栄えに関する記述（フォントサイズやカラーなど）は省いているものになります。
また、このエントリー内では動きの紹介にそれぞれアニメーションGIFを使用しているので、実際の動きや表示は以下デモページで確認できます。

DEMO

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

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

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

DEMO – Caption Effect 01

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

今回は上からの場合ですが、topをbottomに変更すれば下から表示されるものに変更できます。
実際の動きは以下で確認できます。

DEMO – Caption Effect 02

3. 左から表示

3. 左から表示

先ほどとほとんど記述は変わらず、topとleftの値を変更することで、画像にマウスオーバーすると左から画像全体に被るようにマスクとキャプションが表示されます。
実装には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;
}

今回は左からの場合ですが、leftをrightに変更すれば右から表示されるものに変更できます。
実際の動きは以下で確認できます。

DEMO – Caption Effect 03

4. 左上から表示

4. 左上から表示

こちらもほとんど記述は変わらず、topとleftの値を変更することで、画像にマウスオーバーすると左上から画像全体に被るようにマスクとキャプションが表示されます。
実装には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;
}

今回は左上からの場合ですが、topとleftの部分を変更すれば右上や左下から表示されるものにも変更できます。
実際の動きは以下で確認できます。

DEMO – Caption Effect 04

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

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

DEMO – Caption Effect 05

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

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

DEMO – Caption Effect 06

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

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

DEMO – Caption Effect 07

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

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

DEMO – Caption Effect 08

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

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

DEMO – Caption Effect 09

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

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

DEMO – Caption Effect 10

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

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

DEMO – Caption Effect 11

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

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

DEMO – Caption Effect 12

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

DEMO – Caption Effect 13

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

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

DEMO – Caption Effect 14

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

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

DEMO – Caption Effect 15

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

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

DEMO – Caption Effect 16

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

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

DEMO – Caption Effect 17

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

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

DEMO – Caption Effect 18

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

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

DEMO – Caption Effect 19

20. 画像下に表示 #2

20. 画像下に表示 #2

こちらも先ほどのものと同様でマスクなしで、マウスオーバーすると画像下にキャプションが表示されるというものになりますが、h3とpが表示されるタイミングを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;
}

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

DEMO – Caption Effect 20

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

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

CSS3 Hover Effects – Alessio Atzeni | Hybrid Designer & Front-end Developer

Original Hover Effects with CSS3 | Codrops

Caption Hover Effects | Codrops

Leave a Comment