サムネイル見本用の小さい画像にマウスをのせると画像が大きくなり，大きくなった画像からマウスをのけると元に戻る部品（テクニック）を紹介します。HTMLとCSSだけを使用した方法ですが，動作は安定していて，コードの記述も簡単。特にHTMLの記述は，これ以上は望めないというほど，超簡単です。ただし基本的にモバイル機器には対応していません。
もくじ
概要
長所と短所
サンプル
概要
長所と短所
サンプル
概要
小さい画像にマウスをのせると画像が大きくなり，大きくなった画像からマウスをのけると元に戻ります。
モバイル機器の場合はタップすると画像が大きくなりますが，元に戻すためには，画像以外をタップする必要があります。
小さい画像用の画像ファイルは使用しません。ここで使用した画像ファイルは長辺1200ピクセル，短辺800ピクセルです。小さい画像は長辺300ピクセル，大きい画像は長辺900ピクセルで表示させています。
長所と短所 （△：長所 ▽：短所）
△マウスをのせると拡大し，のけると元に戻るので，操作が楽です。
△大きい画像を表示したとき，それ以下のコンテンツが隠れません。
△サムネイル用の画像を準備する必要がありません。
△CSSの記述は少なく，特にHTMLの記述はこれ以上ないというほど簡単です。
▽マウスを横方向に動かして画像の上にのせたりのけたりすれば問題ありませんが，縦方向に動かすと，意図しない画像が大きくなることがあります。
▽サムネイルの上に，無意識にマウスをのせただけでも大きくなるので，煩わしく感じられることがあります。
▽ページ内の全画像が最初に読み込まれるので，特に画像サイズが大きい場合は通信量が多くなり，ページの表示が遅くなります。
サンプル
JR稲沢駅にはたくさんの機関車が留置されています。写真にはDD51形ディーゼル機関車とEF64形電気機関車の姿があります。
竹原フェリーターミナルには，竹原市と瀬戸内海の大崎上島を結ぶ竹原⇔白水・竹原⇔垂水などのフェリーが発着します。
証城寺の狸囃子発祥の地である木更津は，街のあちらこちらにたぬきのオブジェがあります。写真はJR木更津駅前にある，逆さ狸「きぬ太くん」です。
使用した主なCSS
参考のために基本的なことにしぼってあります。
/* サムネイルの幅300px，大きい画像の幅900px */
.mo300-900 {width: 300px; cursor: grab;}
.mo300-900:hover {width: 900px;}
【解説】
マウスがのっていないときは幅300pxで表示します。
.mo300-900:hover {width: 900px;}：マウスがのると幅900pxで表示します。
cursor: grab;：マウスをのせたときのカーソルの形を〔つかむ〕にしました。これは任意です。
注意：.mo300-900: hoverというように，スペースを入れると無効になります。
使用した主なHTML
<p> JR稲沢駅にはたくさんの機関車が留置されています。写真にはDD51形ディーゼル機関車とEF64形電気機関車の姿があります。<br> <img class="mo300-900" src="photo01.jpg" alt="たくさんの機関車が留置されているJR稲沢駅"> </p>