マウスオーバーにより画像をポップアップ表示する

リンク画像をマウスオーバーする際にスナップショット画像をポップアップ表示するとそれっぽくなる。
方法はいくらでもありそうだが、格ゲーチェッカーさんを参考にCSSで実装することに。
流れとしては
・ポップアップする画像は画面外に移動させておく(絶対座標)
・マウスオーバーした際は相対座標を指定して画面内に移動させる
・画像が重なる場合はz-indexをあげておく

CSS

/* 絶対座標で画面外に */
.popup img.up{
	display:block;
	top:-10000px;
	left:-10000px;
	position:absolute;
}
/* 相対座標に。z-indexはあげておく */
.popup:hover {
	position:relative;
	z-index: 1000;
}
/* 相対座標で右上に表示 */
.popup:hover img.up{
	top:-100px;
	left:200px;
}

HTML

<!-- jqueryは読み込んでおく -->
<a class="popup" style="display:block;width:160px;height:90px;border:1px solid;background-image: url([画像URL]);background-repeat:no-repeat;background-position:center center;background-size:cover;" href=[リンクURL]>
	<img class="up hidden-xs" src="http://static-cdn.jtvnw.net/previews-ttv/live_user_fantasistaokayama-320x200.jpg">
</a>
<!-- hidden-xsはjqueryのcssにて定義。携帯端末では非表示 -->