上からアニメーションでキャプションを表示

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

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

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

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

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

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

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

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


株式会社 PIK

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

TEL.03-6433-0422