キャプション付き画像をマウスオーバーするとキャプションを表示させる
キャプションの文字列が画像の幅を超えないようにしましょう。
画像にマウスをあてる人がいるかどうかについては？（笑）
左側の画像は、カラムを利用しています。
下の画像は、写真付き文章です。
どちらもうまく行きますが、写真だけだと、画像がはみ出してしまいます。解決方法はあるのですが、そのためには幅を固定しなくてはなりません。
解決方法を見つけたら、情報を追加します。
追加する前に見つけたら教えてね！紹介させていただきます。
m(_ _ )m
キャプションが画像幅よりも長いと、文字が切れてしまいます。
ご注意ください。
キャプションが画像幅よりも長いと、文字が切れてしまいます。
ご注意ください。
キャプションが画像幅よりも長いと、文字が切れてしまいます。
ご注意ください。
キャプションが画像幅よりも長いと、文字が切れてしまいます。
ご注意ください。
<style type="text/css">
.cc-imagewrapper{
position:relative;
overflow:hidden;
}
.cc-imagewrapper img{
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-o-transform: scale(1.0);
-ms-transform: scale(1.0);
transform: scale(1.0);
-webkit-transition: .3s;
transition: .3s;
}
.cc-imagewrapper figcaption{
background:rgba(0,0,0,0.6);
color:#FFF;
text-align:center;
height:40px;
line-height:40px;
position:absolute;
bottom:-40px;
left:0;
-webkit-transition: .3s;
transition: .3s;
}
.cc-imagewrapper:hover figcaption{
bottom:0px;
}
.cc-imagewrapper:hover img{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
</style>
Jimdoの有料バージョンをお使いの方は
『設定』＞『ヘッダー部分を編集』の項目で「個別ページまたはブログ記事」を選べば、特定のページだけにこのアニメーションを適用させることが出来ます。
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
