Css3 ile Resimleri Popup Pencerede Gösterme-Görüntü Popup

Javascript kullanmadan Css3 kullanarak, mausla küçük resmin üzerine gelindiğinde küçük resim görüntüsünün tam boyutlu bir penceresini gösterebiliriz.

Javascript kullanmadan yapacağımız bu uygulamada, efekti görmek için mausla küçük resmin üzerine gelindiğinde konumunu ve büyüklüğünü belirlediğimiz şekilde büyük resmimizin  görünmesini sağlayacağız.

Kaynak kodları sayfa altında verilen linkten indirebilirsiniz.

Önce projemizde kullanacağımız büyük ve küçük görüntülerimizi unorder list (sırasız)  şeklinde oluşturalım.

<ul class="buyutme">
  <li> <img src="thumb-1-kucuk.jpg" width="200" height="150" alt="Tatil Havuzu " /> 
    <span> 
    <img src="thumb-1-buyuk.png" alt="Tatil Havuzu" /> 
    <br />
    Tatil Havuzu 
    </span>

</li>
<li> <img src="thumb-2-kucuk.jpg" width="200" height="150" alt="Ayvalık"/> 
    <span> <img src="thumb-2-buyuk.png" alt="Ayvalık" /><br />
    Ayvalık 
    </span> 
  </li> 
<li> <img src="thumb-3-kucuk.jpg" width="200" height="150" alt="Palmiyeler" /> 
    <span> <img src="thumb-3-buyuk.png" alt="Palmiyeler" /><br /> 
    Palmiyeler </span> 
  </li>
</ul>

Şimdi buyutme classı ile sırasız listemizin stil  kodlarını oluşturalım.Önce listemizin sol başındaki işaretleri kaldıralım. Sol boşluğu da sıfırlayalım.

ul.buyutme{
      list-style-type:none; 
      margin-left:0;
     }

Resimlerimizi soldan sağa bir hatta sıralıyalım. Konumlandırarak z eksenindeki konumunu sıfırlayalım ve resimler arasında boşluk oluşturalım.

ul.buyutme li{
 display:inline-block;
 position: relative;
 z-index: 0; 
 margin:350px 25px 0 100px;
       }

Görsellerimize box-shadow özelliği verelim, köşeleri yuvarlatılmış çerçeve içine alalım ve çerçeveye renk verelim. Büyük resmimizi de konumlandırıp büyük eksi değeri vererek görüntüsünü gizleyelim.

ul.buyutme img{
 background-color:#eae9d4;
 padding: 6px;
 box-shadow: 0 0 6px rgba(132, 132, 132, .75);
 border-radius: 4px; 
       }
ul.buyutme span{
 position:absolute;
 left: -9999px;
 background-color:#eae9d4;
 padding: 10px;
 font-family: sans-serif;
 font-size:.9em;
 text-align: center; 
 color: #495a62; 
 box-shadow: 0 0 20px rgba(0,0,0, .75);
 border-radius:8px;
       }

z-index: 50 ile büyük resmimizi küçük resmimizin üstüne (önüne) yerleştiriyoruz ve mausla resmin üzerine geldiğimizde cursor pointer haline dönüşsün istiyoruz. Büyük resim için de 2px iç boşluk veriyoruz.

ul.buyutme li:hover{
 z-index: 50;
 cursor:pointer;
      }
ul.buyutme span img{
 padding:2px;
 background:#ccc;
      }

Şimdi de; küçük resmimizin altından açılır pencerenin başına olan uzaklığı ve küçük resmimizin solundan açılır pencerenin soluna olan mesafeyi belirleyelim.

ul.buyutme li:hover span{ 
 top: -300px; 
 left: -50px; 
     }

Resimlerin üzerine geldiğimizde her bir görüntü için ayrı ayrı bir sol mesafe ayarlayalım.

ul.buyutme li:hover:nth-child(2) span{
 left: -100px; 
       }
ul.buyutme li:hover:nth-child(3) span{
 left: -200px; 
       }

Sonuç olarak; mausla küçük resimlerin üzerine geldiğimizde büyük resmimiz aşağıda ki şekilde popup olarak açılacaktır.

Kaynak Kodları İNDİR

Küçük resmi büyük olarak popup pencerede gösterme