グリッド状に配置された画像がナビゲーションとなり、そのクリックで、その画像が拡大され、説明文が表示される。cssアニメーションらしく、ここまでがシームレスで表示される。このまま、単なるギャラリーとしても使えると思うが、作品や商品紹介、実績紹介などのポートフォリオとして応用できるのではないかと思い作成した。
準備するもの
・幅1000px、高さ563pxの写真（ここでは15枚のjpgファイル）を、フォルダimg14に格納する
・閉じるボタンの画像（end.gif）を、フォルダimages内に置く
・本サンプル表示用のhtml、cssのコードを記載した、code.html を i-html フォルダ内に置く
サンプル（DEMO）
こちらのページに、表示用HTML及びCSSのコードとともに示した。
作成のポイント説明
・各写真を20%の大きさで、5列3行にposution:absoluteで並べ、その小画像のクリックで、クリックされた画像を100%に拡大し、その他の小画像は非表示にする。
・小画像のマウスオーバーで、その画像に赤紫色のスクリーンをかけ、標題をフェイドイン表示させる。
・小画像のクリックで、スクリーン、標題を非表示にし、閉じるボタンを表示し、説明文を表示させる。
（表題を非表示にするのに、pointer-events: none;を使っているので、マウスが移動するまでは表示状態になる）
・各画像の説明文は、全てHTML内に記述している。それぞれをhtmlファイルにして、iframe内に読み込む方法もあるかと思う。
・閉じるボタン、もしくは、「一覧に戻る」をクリックすると、拡大写真をもとにサイズに戻し、初期画面に戻す。
・初期画面では、小画像の一覧の下の部分に記述欄を設けることも可能。
（ここでは、本サンプル表示用のHTML,CSSのコードをifrmae内に読み込んでいる）
この表示は、拡大写真表示時には非表示にし、閉じるボタンのクリックで表示されるようにする。
・小画像、その他記述の表示の垂直位置は、padding-topの%数値で決めている。
（この数値は、計算と言うよりは、最適な数値をトライアンドエラーで決めた）
・このサンプルでは、拡大写真下の説明文は、要約のみ記述し、そこからリンクで詳細ページに飛ぶようにしている。