CSSだけで画像のポップアップ

参考エントリー：CSSだけでマウスオーバー時、画像をポップアップさせる

今まで、マウスオーバーで画像をポップアップさせるにはjavascriptを使っていたのだが、javascriptは敷居が高すぎる（自分が）！なのでCSSだけを使い、マウスオーバーでポップアップできるように実現させてみたい！
あともちろん、Web標準化を目標とする。そしてソースもなるべくきれいにさせる。

現在、WinIE、Win Firefox、Mac Safari、Mac Firefox、Mac Caminoで確認済み。
WinIEでは透過PNGでも透過されない。
Win Opera(8.5)、Mac Opera(8.52)では残像が残る現象が起こる

Amazonのおまかせリンク™

表示例

前提としてブロック要素div（セレクタ名：popup）で囲っています

firefox iconFirefoxアイコンをポップアップ

入力例

HTMLソース&CSSソース

HTMLソース

<div class="popup">
<a href=""><img width="128" height="128" alt="firefox icon" src="http://garage.mods.jp/blog/image/icns/firefox.png" />Firefoxアイコンをポップアップ</a>
</div>

CSSソース

.popup img {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

.popup a:hover {
position:relative;
}

.popup a:hover img{
top:30px;
left:20px;
}

説明

まず、ポップアップさせる画像もHTMLソース内に書いてしまいます。しかし、これをスタイルシートではじき飛ばします。ここではtop:-10000px、left:-10000pxに飛ばしています。

そしてポップアップさせるテキストにアンカーを貼り、疑似要素「hover」を使って飛ばした画像を呼び寄せます。またポップアップさせる場所は、アンカー部分を座標（0,0）として考えてtop:30px、left:20pxで表示させるように設定してますので、この

.popup a:hover img{
top:30px;
left:20px;
}

数値を変更すれば、お好みの場所へポップアップさせることが可能となります。

応用

いろいろな方向にポップアップさせます

firefox icon右にポップアップ（top:-128px、left:20em）

firefox icon上にポップアップ（top:-128px、left:0）

H19.5.31追記

質問にあった画像にリンクを張った場合のポップアップです

アンカー内に画像を2つ並べ、ポップアップするほうにセレクタを指定します。
ただSafariじゃうまくhoverしません・・・

firefox icon thumbnail firefox icon（top:-256px、left:0）

HTMLソース

<div class="popup">
<a href=""><img class="pop" width="128" height="128" alt="firefox icon" src="http://garage.mods.jp/blog/image/icns/firefox.png" /> <img width="128" height="128" alt="サムネイル" src="http://garage.mods.jp/blog/image/icns/firefox.png" /> </a>
</div>

CSSソース

.popup img.pop {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

.popup a:hover {
position:relative;
}

.popup a:hover img.pop {
top:-256px;
left:0;
}