1. TOP
  2. CSS
  3. CSSのみで作る キャプションエフェクト 画像に動きを出す

CSSのみで作る キャプションエフェクト 画像に動きを出す

目次

マスクをかけるエフェクト

figcaptionタグは、図表のキャプションを示す際に使用します。figure~/figureの中に配置すると、図表にキャプションを付けることができます。
figcaption要素は、HTML5から新たに追加された要素です。
figureとfigcaptionと以前説明したtransitionをつかってキャプションエフェクトをつくってみます。
以前のtransitionの説明記事はこちら


HTML

<figure>
	<img src="画像URL" />
        <figcaption>
		<p class="fontL">おめでとう!</p>
		<p class="fontM">赤飯です。おいしく食べてね!</p>
	</figcaption>
</figure>


CSS

figure {
	position: relative;
	overflow: hidden;
	width: 50%;
}
figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
	opacity: 0;
}

figure:hover figcaption {
	opacity: 1;
}
p.fontL {
padding: 25% 0 0 0;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 30px;
}

p.fontM {
color: #fff;
text-align: center;
}

@media screen and (max-width: 599px){
figure {
	width: 80%;
}
}



結果

おめでとう!

赤飯です。おいしく食べてね!



スポンサードリンク


追加で 画像を拡大させる

下記のCSS追加し、

HTML

<figure>
	<img src="画像URL" class="zoom"/>*/classを追加/*
        <figcaption>
		<p class="fontL">おめでとう!</p>
		<p class="fontM">赤飯です。おいしく食べてね!</p>
	</figcaption>
</figure>


CSS

.zoom {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
		}
figure:hover .zoom {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}



結果

おめでとう!

赤飯です。おいしく食べてね!




  
「g-tune」を
アマゾンで探す       
楽天で探す     
yahooで探す     

スポンサードリンク


コメントを書き込む

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

CAPTCHA