[解決済み] 画像の重ね合わせ方

質問

CSSを使って、ある画像に別の画像を重ねたいのです。この例は、最初の画像（あなたが好きなら、背景）は、製品のサムネイルリンクになり、リンクは画像の拡大版を表示するライトボックス/ポップアップを開きます。

このリンクされた画像の上に虫眼鏡の画像を置き、画像をクリックして拡大できることを示したいと思います（どうやら虫眼鏡がないと、これは明らかではないみたいです）。

どのように解決するのですか？

私はちょうどプロジェクトでこの正確なことをやってしまった。HTML 側はちょっとこんな感じでした。

<a href="[fullsize]" class="gallerypic" title="">
  <img src="[thumbnail pic]" height="90" width="140" alt="[Gallery Photo]" class="pic" />
  <span class="zoom-icon">
      <img src="/images/misc/zoom.gif" width="32" height="32" alt="Zoom">
  </span>
</a>

次にCSSを使用します。

a.gallerypic{
  width:140px;
  text-decoration:none;
  position:relative;
  display:block;
  border:1px solid #666;
  padding:3px;
  margin-right:5px;
  float:left;
}

a.gallerypic span.zoom-icon{
  visibility:hidden;
  position:absolute;
  left:40%;
  top:35%;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

a.gallerypic:hover span.zoom-icon{
  visibility:visible;
}

CSSのサンプルをたくさん残しておいたので、私がどのようにスタイルを決めたかがわかると思います。なお、虫眼鏡で見えるように不透明度を低くしています。

これが役に立つといいのですが。

編集: あなたの例を明確にするために、あなたは visibility:hidden; を無視し :hover の実行を停止させることができます。これは私が行った方法です。