下からキャプションを表示し画像も拡大

キャプション付き画像をマウスオーバーするとキャプションを表示させる

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

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

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

左側の画像は、カラムを利用しています。
下の画像は、写真付き文章です。
どちらもうまく行きますが、写真だけだと、画像がはみ出してしまいます。解決方法はあるのですが、そのためには幅を固定しなくてはなりません。
解決方法を見つけたら、情報を追加します。
追加する前に見つけたら教えてね!紹介させていただきます。
m(_ _ )m


株式会社PIK 代表取締役 村井芳裕
株式会社PIK 代表取締役 村井芳裕

キャプションが画像幅よりも長いと、文字が切れてしまいます。
ご注意ください。

キャプションが画像幅よりも長いと、文字が切れてしまいます。
ご注意ください。

キャプションが画像幅よりも長いと、文字が切れてしまいます。
ご注意ください。

キャプションが画像幅よりも長いと、文字が切れてしまいます。
ご注意ください。


<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の有料バージョンをお使いの方は

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

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

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


株式会社 PIK

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

TEL.03-6433-0422