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);
}
結果
おめでとう！
赤飯です。おいしく食べてね！
スポンサードリンク
コメントを書き込む