• MENU●●●●
  • フォトギャラリー画像に枠内で拡大する動きを付けるカスタマイズ


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    枠内で拡大する動きを作動させるCSS追記行..動的作動

    当ページ解説は、上部ページからのフォトギャラリー導入解説に沿っての意味合いで
    進めております。

     

    詳細はこちらからご確認願います
    画像をフォトギャラリー表示とするCSS記載手順
    シリウスをフォトコレクションサイトへカスタマイズ?

     


     

    ギャラリーに配列するフォト画像に個別指定で枠内に限る形式ではあるが、
    マウスオーバーで拡大する動的作動を付随させる...です

     

    画像をマウスオーバーして作動をご確認ください

     

    横3列

     


     

    導入方法

     

    CSS行を追加しますが、上部ページのCSSに合わせて作成しております

     

    前ページで記載するCSS記述に以下を追加してください
    ...で、すべてのフォトギャラリーは同じ作動を表します......サイズ指定だけ画像サイズに書き換えてくださいね

     

    それだけ...です

     

     

    .photogallery-3 {
    width: 290px;
    height: 200px;
    overflow: hidden;
    }
    .photogallery-3 img {
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
    }
    .photogallery-3 img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    }

     

    ここで終わり...その他は後ほど...

    フォトギャラリー画像に枠内で拡大する動きを付けるカスタマイズ関連解説
    画像をフォトギャラリー表示とするCSS記載手順
    シリウスサイト内、どこでも作動させることができる フォトコレクション、ギャラリースタイルを指定するCSS指定の手順を解説してます