今回のお題は、画像にキャプションを示すアニメーションだ。マウスポインタを画像に重ねると説明書きが現れる(サンプル1 ) 。画像にもちょっとしたアニメーションが加えてある。用いる設定は、さほど目新しいものではない。組み合わせや細かな調整を加えてつくり上げた表現だ。
サンプル1 CSS3: Hover effect of an image and a caption
キャプションを加えた画像の静的スタイル
<body>
要素に書くコードはつぎのように構成した。画像の<img>
要素に続けて<div>
要素(class
属性"mask")を置き、<div>
要素の中に、タイトルの<h3>
要素(class
属性"figure-title")と説明書きの<div>
要素(class
属性"figure-caption")を加えた。それらを<div>
要素(class
属性"figure")でひとつにまとめ、さらに<div>
要素(class
属性"container")で包んでいる。
<div class="container">
<div class="figure">
<img src="images/photo_001.png" alt="pen" width="300" height="200">
<div class="mask">
<h3 class="figure-title">Figure Title</h3>
<p class="figure-caption"><!-- テキスト省略 --> </p>
</div>
</div>
</div>
この<body>
要素の記述に対して、つぎのような<style>
要素を与える。画像にキャプションを重ねただけで、まだアニメーションもマウスインタラクションもない(図1 ) 。なお、CSSにベンダープレフィックスを付けなくて済むように、<script>
要素で-prefix-free を読み込んでいる(第1回の「ベンダープレフィックスと-prefix-free 」の項参照) 。
<script src="lib/prefixfree.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet" type="text/css">
<style>
img {
vertical-align: bottom;
}
.container {
width: 340px;
margin: 20px auto;
cursor: default;
}
.container::after {
content: "";
clear: both;
display: block;
}
.figure {
position: relative;
color: white;
overflow: hidden;
float: left;
margin-left: 20px;
font-family: "Open Sans", sans-serif;
}
.figure-title,
.figure-caption {
position: absolute;
left: 20px;
width: 260px;
text-align: center;
}
.figure-title {
top: 10px;
font-size: 24px;
font-weight: 600;
}
.figure-caption {
top: 60px;
font-size: 12px;
font-weight: 400;
}
</style>
図1 画像に重ねられたキャプション
Google Fontsと回り込みの解除
アニメーションに取りかかる前に、2つほど補っておく。ひとつは、Google Fonts のフォントを使ったことだ。サイトのページ左側にある検索のフールドやフィルタで好みのフォントが絞り込める。今回はOpen Sansを用いた(図2 ) 。[Quick-use]のボタンから開くページで、選べるオプションや<link>
要素の書き方などが示される。
図2 Google FontsのフォントOpen Sans
もうひとつは、つぎのような::after
擬似要素 とclear
プロパティの定めにより、画像への回り込みを解除していることである(「 CSS の after 擬似要素で回り込みを解除する 」参照) 。サンプル1 は回り込むものがないので、このCSSの記述はなくても問題ない。だが、以下のコードのように<div>
要素(class
属性"container")の後に<p>
要素でテキストを加えると、画像に回りこんでしまう(図3 上) 。::after
擬似要素の記述を加えることで、これが防げる(図3 下) 。
.container::after {
content: "";
clear: both;
display: block;
}
<div class="container">
</div>
<p><!-- テキスト省略 --> </p>
図3 ::after擬似要素で回り込みが解除される
画像にポインタが重なったらキャプションを示す
それでは、画像にポインタが重なったら、キャプションをアニメーションで示すようにしよう。キャプションの表示・非表示は、opacity
プロパティ で滑らかに変える。また、transform
プロパティにscale()
関数 を与えて、伸縮のアニメーションも加える。タイトル(class
属性"figure-title")と説明書き(class
属性"figure-caption")に定めたCSSはつぎのとおりだ。
.figure-title,
.figure-caption {
opacity: 0;
transform : scale (10);
transition : 0.3s ease-in-out ;
}
.figure:hover .figure-title,
.figure:hover .figure-caption {
opacity: 1;
transform : scale(1);
}
.figure:hover .figure-title {
transition-delay : 0.1s;
}
.figure:hover .figure-caption {
transition-delay : 0.2s;
}
コードの中に用いたtransition-delay
プロパティ は、アニメーションが始まるのを与えた秒数分遅らせる(デフォルト値0s) 。この値はtransition
プロパティで定めることもできる。今回は要素によって遅らせる時間を変えるため、transition-delay
プロパティを使うことにした。これで、画像にマウスポインタを重ねると、キャプションがタイトルと説明書きで少し時間がずれて現れる(図4 ) 。ここまでのCSSの定めを、以下のコード1 にまとめた。
図4 画像にポインタを重ねるとキャプションが時間差で現れる
コード1 画像にポインタを重ねたときキャプションがアニメーションで現れる
img {
vertical-align: bottom;
}
.container {
width: 340px;
margin: 20px auto;
cursor: default;
}
.container::after {
content: "";
clear: both;
display: block;
}
.figure {
position: relative;
color: white;
overflow: hidden;
float: left;
margin-left: 20px;
font-family: "Open Sans", sans-serif;
}
.figure-title,
.figure-caption {
position: absolute;
left: 20px;
width: 260px;
text-align: center;
opacity: 0;
transform : scale (10);
transition : 0.3s ease-in-out ;
}
.figure-title {
top: 10px;
font-size: 24px;
font-weight: 600;
}
.figure-caption {
top: 60px;
font-size: 12px;
font-weight: 400;
}
.figure:hover .figure-title,
.figure:hover .figure-caption {
opacity: 1;
transform : scale (1);
}
.figure:hover .figure-title {
transition-delay : 0.1s;
}
.figure:hover .figure-caption {
transition-delay : 0.2s;
}
画像に色をかぶせる
マウスポインタを重ねたときキャプションを出すのに加え、画像に半透明のカラーをかぶせよう。キャプションが入った<div>
要素(class
属性"mask")につぎのようなCSSを定める。background
に半透明のカラーを与え、表示・非表示はやはりopacity
プロパティで変えた。transition-duration
プロパティ は、アニメーションの時間を決める。あらかじめtransition
プロパティで設定された時間だけを変えたい場合に使うとよい。このコードでは、マウスポインタを重ねたときと外したときとでアニメーションの時間が変わる。
.mask {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition : 0.5s;
}
.figure:hover .mask {
opacity: 1;
transition-duration : 0.3s;
}
これで、マウスポインタを画像に重ねたとき、キャプションが現れるとともに半透明のカラーがかぶさる(図5 ) 。背景色により、テキストがより際立つようになった。ここまでのCSSの定めは、以下のコード2 にまとめたとおりだ。
図5 ポインタを重ねるとキャプションに加えて画像にカラーがかぶさる
コード2 ポインタを重ねるとキャプションと半透明のカラーが画像にかぶさる
img {
vertical-align: bottom;
}
.container {
width: 340px;
margin: 20px auto;
cursor: default;
}
.container::after {
content: "";
clear: both;
display: block;
}
.figure {
position: relative;
color: white;
overflow: hidden;
float: left;
margin-left: 20px;
font-family: "Open Sans", sans-serif;
}
.mask {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition : 0.5s;
}
.figure-title,
.figure-caption {
position: absolute;
left: 20px;
width: 260px;
text-align: center;
opacity: 0;
transform : scale (10);
transition : 0.3s ease-in-out ;
}
.figure-title {
top: 10px;
font-size: 24px;
font-weight: 600;
}
.figure-caption {
top: 60px;
font-size: 12px;
font-weight: 400;
}
.figure:hover .mask {
opacity: 1;
transition-duration : 0.3s;
}
.figure:hover .figure-title,
.figure:hover .figure-caption {
opacity: 1;
transform : scale (1);
}
.figure:hover .figure-title {
transition-delay : 0.1s;
}
.figure:hover .figure-caption {
transition-delay : 0.2s;
}
画像に変形のアニメーションを加える
画像にも軽くアニメーションを加えよう。マウスポインタを重ねたら、少し大きくして傾けることにする(図6 ) 。<img>
要素には、つぎのようにclass
属性"transform"を与えた。そして、以下のCSSのとおり、transform
プロパティに関数rotate()
とscale()
で、回転と拡大の変形を加えている。
<div class="container">
<div class="figure">
<img src="images/photo_001.png" alt="pen" width="300" height="200" class="transform">
</div>
</div>
.transform {
transition : 0.3s ease-in-out ;
}
.figure:hover .transform {
transform : rotate (-15deg) scale (1.4);
}
図6 ポインタを重ねると画像は大きくなって傾く
リンクボタンをアニメーションで加える
仕上げとして、リンクのボタンをアニメーションで加えよう。<div>
要素(class
属性"container")に、つぎのように<a>
要素(class
属性"info-link")を含める。CSSは以下のとおり、ボタンとしての見た目を整え、画像の下端から上ってくる動きにした(図7 ) 。アニメーションの始まりはもっとも遅い。書き上がった<body>
要素へのタグの記述とCSSの定めは、以下のコード3 にまとめたとおりだ。
<div class="container">
<div class="figure">
<a href="#" class="info-link">More info</a>
</div>
</div>
.transform,
.info-link {
transition : 0.3s ease-in-out ;
}
.info-link {
position: absolute;
top: 200px;
left: 100px;
width: 80px;
padding: 5px 10px;
background: navy;
color: white;
text-decoration: none;
}
.figure:hover .info-link {
top: 150px;
transition-delay : 0.4s;
}
図7 ポインタを重ねたとき最後に画像下端からリンクボタンが上ってくる
コード3 画像にポインタを重ねるとキャプションなどがアニメーションで現れる
<div class="container">
<div class="figure">
<img src="images/photo_001.png" alt="Cactus" width="300" height="200" class="transform">
<div class="mask">
<h3 class="figure-title">Figure Title</h3>
<p class="figure-caption"><!-- テキスト省略 --> </p>
</div>
<a href="#" class="info-link">More info</a>
</div>
</div>
img {
vertical-align: bottom;
}
.container {
width: 340px;
margin: 20px auto;
cursor: default;
}
.container::after {
content: "";
clear: both;
display: block;
}
.figure {
position: relative;
color: white;
overflow: hidden;
float: left;
margin-left: 20px;
font-family: "Open Sans", sans-serif;
}
.mask {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition : 0.5s;
}
.figure-title,
.figure-caption {
position: absolute;
left: 20px;
width: 260px;
text-align: center;
opacity: 0;
transform : scale (10);
transition : 0.3s ease-in-out ;
}
.figure-title {
top: 10px;
font-size: 24px;
font-weight: 600;
}
.figure-caption {
top: 60px;
font-size: 12px;
font-weight: 400;
}
.figure:hover .mask {
opacity: 1;
transition-duration : 0.3s;
}
.figure:hover .figure-title,
.figure:hover .figure-caption {
opacity: 1;
transform : scale (1);
}
.figure:hover .figure-title {
transition-delay : 0.1s;
}
.figure:hover .figure-caption {
transition-delay : 0.2s;
}
.transform,
.info-link {
transition : 0.3s ease-in-out ;
}
.figure:hover .transform {
transform : rotate (-15deg) scale (1.4);
}
.info-link {
position: absolute;
top: 200px;
left: 100px;
width: 80px;
padding: 5px 10px;
background: navy;
color: white;
text-decoration: none;
}
.figure:hover .info-link {
top: 150px;
transition-delay : 0.4s;
}