マウスオーバーした時に画像を拡大させて見せることができるプラグインです。
ウェブカタログ等でよく使われている便利な機能で、プラグインをダウンロードし簡単に実装できます。
今回使用したのは、jQueryプラグインZoomです。

↓以下が実際のソースサンプルです。

▼JavaScript

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type="text/javascript" src="js/jquery.zoom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#building").zoom();
	$("#park").zoom({on: 'grab'});
	$("#burger").zoom({on: 'click'});
	$("#night").zoom({on: 'toggle'});
});
</script>

▼CSS

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	text-align: center;
	margin-top:10px;
}
.up {
	display:inline-block;
	position: relative;
	border-radius:130px;
}
.up img {
	display: block;
	border-radius:130px;
}
.box{
	float:left;
	margin:10px 20px;
}
h2,
p{
	margin-bottom:5px;
	font-size:14px;
}
</style>

▼HTML

<div class="box">
  <h2>mouseover</h2>
  <p>画像の上でマウスを動かすと…</p>
  <span class="up" id="building"><img src="images/01.jpg" width="250" height="250" /></span> </div>
<div class="box">
  <h2>grab</h2>
  <p>画像の上をドラッグすると…</p>
  <span class="up" id="park"><img src="images/02.jpg" width="250" height="250" /></span> </div>
<div class="box">
  <h2>click</h2>
  <p>画像の上で一度クリックしてマウスを動かすと…</p>
  <span class="up" id="burger"><img src="images/03.jpg" width="250" height="250" /></span> </div>
<div class="box">
  <h2>toggle</h2>
  <p>ズームしたい画像の箇所をクリックすると…</p>
  <span class="up" id="night"><img src="images/04.jpg" width="250" height="250" /></span> </div>

今回、参考にさせていただいたのは、
『jQuery Zoom で画像の拡大機能を実装する』さん、『A plugin to enlarge images on touch, click, or mouseover.』さんです。
ありがとうございます。 デモページは、こちら