概要

サムネイルにマウスをのせると画像が大きくなり，マウスをのけるとサムネイルに戻ります。（スマホ等の場合は，タップすると画像が大きくなり，画像以外をタップするとサムネイルに戻ります。）

サムネイル用の画像ファイルは使用しません。ここで使用した画像ファイルは，すべて長辺1200ピクセル，短辺800ピクセルです。サムネイルは長辺300ピクセル，大きい画像は長辺900ピクセルで表示させています。

長所と短所 （△：長所　▽：短所）

△マウスをのせると拡大し，のけると元に戻るので，操作が楽です。

△大きい画像を表示したとき，それ以下のコンテンツが隠れません。

△サムネイル用の画像を準備する必要がありません。

△CSSもHTMLも非常に簡単で，少ない量で記述できます。

▽マウスを横方向に動かして画像の上にのせたりのけたりすれば問題ありませんが，縦方向に動かすと，意図しない画像が大きくなることがあります。

▽サムネイルの上に，無意識にマウスをのせただけでも大きくなるので，煩わしく感じられることがあります。

▽ページ内の全画像が最初に読み込まれるので，ページの表示がやや遅くなったり，通信量が多くなる傾向があります。

サンプル

たくさんの機関車が留置されているJR稲沢駅
写真にはDD51形ディーゼル機関車と，EF64形電気機関車の姿が写っている。

竹原フェリーターミナル
広島県竹原市と瀬戸内海の大崎上島を結ぶ，竹原⇔白水・竹原⇔垂水などのフェリーが発着する。

JR木更津駅前にある逆さ狸「きぬ太くん」
証城寺の狸囃子たぬきばやしの発祥の地である木更津は，街のあちらこちらにたぬきのオブジェがある。

使用したCSS

/* サムネイルの幅300px，大きい画像の幅900px */
.mo300-900 {width: 300px; cursor: grab;}
.mo300-900:hover {width: 900px;}
/* サムネイルの幅200px，大きい画像の幅600px */
.mo200-600 {width: 200px; cursor: grab;}
.mo200-600:hover {width: 600px;}

　マウスがのっていないときは，画像を幅300px等で表示します。
　cursor: grab;：マウスをのせたときのカーソルの形を〔つかむ〕にしました。これは任意です。

　.mo300-900:hover：マウスがのっているときは，画像を幅900px等で表示します。
　注意：.mo300-900: hoverというように，スペースを入れると無効になります。

サンプルのHTML

<p>
たくさんの機関車が留置されているJR稲沢駅<br>
写真にはDD51形ディーゼル機関車と，EF64形電気機関車の姿が写っている。<br>
  <img class="mo300-900" src="photo01.jpg">
</p>

<p>
竹原フェリーターミナル<br>
広島県竹原市と瀬戸内海の大崎上島を結ぶ，竹原⇔白水・竹原⇔垂水などのフェリーが発着する。<br>
  <img class="mo300-900" src="photo02.jpg" alt="竹原フェリーターミナル(広島県)">
</p>

<p>
JR木更津駅前にある逆さ狸「きぬ太くん」<br>
証城寺の<ruby>狸囃子<rt>たぬきばやし</rt></ruby>の発祥の地である木更津は，
街のあちらこちらにたぬきのオブジェがある。<br>
  <img class="mo200-600" src="photo03.jpg" alt="JR木更津駅前にある逆さ狸「きぬ太くん」">
<p>