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

詳細はこちらからご確認願います
画像をフォトギャラリー表示とする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);
}

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