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