マウスオ－バーで画像をポップアップする方法

/*マウスオーバーで画像をポップアップ*/
div.OnMouseBig2 { /* 縮小した画像と同じ縦横を指定する */
width: 50%;
}
div.OnMouseBig2 span {
overflow: hidden;
position: relative;
z-index: 1;
cursor: pointer;
}
div.OnMouseBig2 span img { /* 縮小した画像サイズ */
width: 50%;
}
div.OnMouseBig2 span:hover {
overflow:visible;
z-index: 1000; /* 浮かせるレイヤーの数 */
top: -50px; /* 縮小した画像を基点にずらす */
left: -50px; /* 　　　　　　〃　　　　　　 */
}
div.OnMouseBig2 span:hover img { /* 元の画像の大きさ */
background:#fff;
width: 100%;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);

<div class="OnMouseBig2"><span><img src="画像ファイル"></span></div>