下からキャプションを表示し画像をぼかす

画像をマウスオーバーするとキャプションを表示させさらに画像をぼかす

キャプションの文字列が画像の幅を超えないようにしましょう。

画像にマウスをあてる人がいるかどうかについては?(笑)

JIMDO研究所 所長 村井芳裕
JIMDO研究所 所長 村井芳裕

左側の画像は、カラムを利用しています。
写真だけだと、画像がはみ出してしまいます。
解決方法はあるのですが、そのためには幅を固定しなくてはなりません。解決方法を見つけたら、情報を追加します。
追加する前に見つけたら教えてね!紹介させていただきます。
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の有料バージョンをお使いの方は

『設定』>『ヘッダー部分を編集』の項目で「個別ページまたはブログ記事」を選べば、特定のページだけにこのアニメーションを適用させることが出来ます。

▼ タグの貼り付け方はここ マウスを当てると画像が開きます。

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。


株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422