キャプション付き画像をマウスオーバーするとキャプションを表示させる
キャプションの文字列が画像の幅を超えないようにしましょう。
画像にマウスをあてる人がいるかどうかについては？（笑）
<style type="text/css">
.cc-imagewrapper{
position:relative;
overflow:hidden;
}
.cc-imagewrapper figcaption{
background:rgba(0,0,0,0.6);
color:#FFF;
text-align:center;
height:40px;
line-height:40px;
position:absolute;
top:-40px;
left:0;
-webkit-transition: .3s;
transition: .3s;
}
.cc-imagewrapper:hover figcaption{
top:0px;
}
</style>
Jimdoの有料バージョンをお使いの方
『設定』＞『ヘッダー部分を編集』の項目で「個別ページまたはブログ記事」を選べば、特定のページだけにこのアニメーションを適用させることが出来ます。
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。