Css3 Hover Resim Galerisi Yapma

Bu yazımızda jQuery kullanmadan Css kullanarak küçük resimlerle basit bir resim galerisi oluşturup küçük resimlerin üzerine gelindiğinde, ilgili resmi yan tarafta daha büyük ebatta göstereceğiz.

Web sitenizin daha çekici ve kullanışlı hale gelmesinde Css hover efektlerinin çok büyük önemi bulunmaktadır.

Bu uygulamada, Css animasyonlarının desteklendiği modern tarayıcılarda çalışacak şekilde javascript kullanılmamaktadır. Kaynak kodları indirme linki sayfa altında verilmektedir.

Projemize Html kodlarını yazarak başlayalım. Önce görüntülerimizi galeri classına sahip bir div içinde sırasız liste şeklinde gösterelim.

<div class="galeri">

   <ul>

       <li><a href="#"><img class="kucukresim" src="images/resim1.jpg" width= 130" height="100"alt=""/>

        <img class = "buyukresim" src = "images/resim1.jpg" width = "550" height = "412" alt = " "/> </a>

       </ li>

       <li> <a href="#"> <img class ="kucukresim "src ="images/resim2.jpg"width ="130"height ="100"alt =" "/> <img class =" buyukresim "src ="images/resim2.jpg"width ="550"height ="412"alt =" "/> </a>

       </ li>

       <li> <a href="#"> <img class = "kucukresim" src = "images/resim3.jpg" width = "130" height = "100" alt = "" /> <img class = "buyukresim" src = "images/resim3.jpg" width = "550" height = "412" alt = "" /> </a>

       </ li>

<li> <a href = "#"> <img class = "kucukresim" src = "images/resim4.jpg" width = "130" height = "100" alt = "" /> <img class = " buyukresim "src ="images/resim4.jpg"width ="550"height ="412"alt =" "/> </a>

       </ li>

       <li> <a href =" # " ><img class = "kucukresim" src = "images/resim5.jpg" width = "130" height = "100" alt = "" /> <img class = "buyukresim" src = "images/resim5.jpg"width ="550"height ="412"alt =" "/> </a>

       </ li>

       <li> <a href="#"> <img class = "kucukresim" src = "images/resim6.jpg" width = "130" height = "100" alt = ""/> <img class ="buyukresim "src ="images/resim6.jpg"width ="550"height ="412"alt =""/> </a>

       </ li > -

     </ ul>

</ div> 

Yukarıda ki kodlarda da görüleceği üzere, resimlerimizi bir küçükresim bir de büyük resim şeklinde < li > etiketleri arasına yerleştirmiş bulunuyoruz.

Tarayıcımızda ki boşlukları sıfırlayalım.

body{
    margin:0;
    padding:0;
    border:0;
}

Büyük görüntüleri gizleyerek küçük görüntüleri şekillendirelim. Galeri konumuna relative  vererek yükseklik ve genişlik değerlerini verelim. 

.galeri a img.buyukresim{

        display: none;

}

.galeri{

        position: relative;

        width: 900px;

        height: 450px;

        background-image: url(images/resim1.jpg);

        background-position: 480px 50%;

         background-repeat: no-repeat;

        background-color: #bbb;

        margin: 10px; 

}

Resimleri soldan sağa yerleştirelim, sol başlarındaki imleri kaldıralım ve padding değerleride dikkate alınarak genişlik değeri olarak 2 küçük resim genişliği verelim. 

.galeri ul{
 float:left; 
 list-style-type:none; 
 width:300px;
 margin-top:10px;
}

.galeri li{
 float:left;
 width:150px;
}

Küçük resimlerin genişlik, yüksek ve alt, üst boşluklarını verelim. Alt gölge ekleyelim, cursoru pointer yapalım.

.galeri a {
   display:block; 
   padding:10px; 
   text-decoration:none; 
   width:130px; 
   height:100px; 
   cursor:pointer;
}
.galeri a img.kucukresim {
   box-shadow: 1px 2px 4px #444;
}

Büyük resim için konum belirtip, genişlik ve yükseklik verelim, sağdan ve üsten marjları ayarlayalım. Box-shadow özelliği verelim.

.galeri a img.buyukresim {
   display:none; 
   position:absolute; 
   right:10px; 
   top:10px; 
   margin:10px auto; 
   width:550px; 
   height:400px; 
   box-shadow: 2px 3px 8px #444;
}

.galeri a:hover img.buyukresim, .galeri a:focus img.buyukresim {
   display:block; 
}

Sonuç olarak Css resim galerimiz aşağıda ki şekilde görünecektir.

Kaynak Kodları İNDİR

Css ile Hover Resim Galerisi