CSS を使用して、ある画像を別の画像に重ね合わせたいと考えています。この例として、最初の画像 (背景とも言う) が製品のサムネイル リンクになり、リンクをクリックするとライトボックス/ポップアップが開き、画像の拡大版が表示されます。
このリンクされた画像の上に、画像をクリックすると拡大できることをユーザーに示すために、虫眼鏡の画像を配置したいと思います (虫眼鏡がないと、これが明らかではないようです)。
ベストアンサー1
私はちょうどプロジェクトでこれと同じことをやりました。 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実行を強制終了することもできます。これは私が行った方法です。