Başka kullanarak CSS ile bir resim kaplamak istiyorum. Bu ilk resim bir örnek (Eğer isterseniz arka plan) ürünün küçük bir bağlantının, ışıklı / bir popup görüntünün daha büyük bir sürümünü gösteren bir açılış olacak.

Bu bağlantılı bir resim üstüne resim büyütmek için tıklandığında olabilir insanlara göstermek için bir büyüteç bir görüntü, (görünüşe göre bu büyüteç olmadan belli değil) istiyorum.

Ben sadece bir proje tam olarak bu kadar şey yapıyor. HTML tarafında bu gibi biraz baktı:

<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>

Sonra CSS kullanarak:

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;
}

Stil yapmaya karar verdim nasıl görebilirsiniz böylece CSS üzerine örnek bir sürü bıraktım. Büyüteç ile daha iyi görebilmek için, opaklık indirdim unutmayın.

Bu yardımcı olur umarım.

Senin örneğin açıklık - visibility:hidden; Yoksay ve :hover yürütme öldürebilirsin eğer istersen, bu şekilde ben yaptım oldu. EDİT: