CSS Kodları:

ul#gallery {
padding:0;
margin:0;
width:448px;
height:336px;
position:relative;
background:#888 url(galeribg.jpg);
}
#gallery li {
list-style-type:none;
width:64px;
height:48px;
float:left;
z-index:100;
}
#gallery li.lft {
float:left;
clear:left;
}
#gallery li.rgt {
float:right;
clear:right;
}
#gallery a {
position:relative;
width:64px;
height:48px;
display:block;
float:left;
z-index:100;
cursor:default;
}
#gallery a img {
position:relative;
width:62px;
height:46px;
border:1px solid #888;
z-index:100;
}
#gallery a:hover {
width:160px;
height:120px;
padding:108px 144px;
position:absolute;
left:0;
top:0;
z-index:20;
}
#gallery a:hover img {
background:#eee;
position:relative;
width:160px;
height:120px;
border:0;
z-index:20;
}
#gallery a:active, #gallery a:focus {
background:transparent;
width:320px;
height:240px;
padding:48px 64px;
position:absolute;
left:0;
top:0;
z-index:10;
}
#gallery a:active img, #gallery a:focus img {
background:#eee;
position:relative;
width:320px;
height:239px;
border:0;
z-index:10;
}
/* hack for Internet Explorer */
#gallery li.pad {
height:0;
display:block;
margin-top:-2px;
width:448px;
font-size:0;
}

/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
background:#888;
width:320px;
height:240px;
padding:48px 64px;
position:absolute;
left:0;
top:0;
z-index:10;
}
#gallery a:hover img {
background:#aaa;
position:relative;
width:320px;
height:240px;
border:0;
z-index:10;
}
}

Burda ufak bir detay var: background:#888 url(galeribg.jpg);
galeribg.jpg galerinin arkaplanıdır, fakat galerideki resimlerin de arkaplanı bu resimde yer alıyor. Burda da görebilirsiniz tam olarak.

HTML Kodları:

<ul id=”gallery”>
<li><a href=”#nogo”>
<img src=”g1.jpg” alt=”#1″ title=”#1″ /></a></li>
<li><a href=”#nogo”>
<img src=”g2.jpg” alt=”#2″ title=”#2″ /></a></li>
<li><a href=”#nogo”>
<img src=”g3.jpg” alt=”#3″ title=”#3″ /></a></li>
<li><a href=”#nogo”>
<img src=”g4.jpg” alt=”#4″ title=”#4″ /></a></li>
<li><a href=”#nogo”>
<img src=”g5.jpg” alt=”#5″ title=”#5″ /></a></li>
<li><a href=”#nogo”>
<img src=”g6.jpg” alt=”#6″ title=”#6″ /></a></li>
<li class=”rgt”><a href=”#nogo”>
<img src=”g7.jpg” alt=”#7″ title=”#7″ /></a></li>

<li class=”lft”><a href=”#nogo”>
<img src=”g8.jpg” alt=”#8″ title=”#8″ /></a></li>
<li class=”rgt”><a href=”#nogo”>
<img src=”g9.jpg” alt=”#9″ title=”#9″ /></a></li>
<li class=”lft”><a href=”#nogo”>
<img src=”g10.jpg” alt=”#10″ title=”#10″ /></a></li>
<li class=”rgt”><a href=”#nogo”>
<img src=”g11.jpg” alt=”#11″ title=”#11″ /></a></li>
<li class=”lft”><a href=”#nogo”>
<img src=”g12.jpg” alt=”#12″ title=”#12″ /></a></li>
<li class=”rgt”><a href=”#nogo”>
<img src=”g13.jpg” alt=”#13″ title=”#13″ /></a></li>
<li class=”lft”><a href=”#nogo”>
<img src=”g14.jpg” alt=”#14″ title=”#14″ /></a></li>
<li class=”rgt”><a href=”#nogo”>
<img src=”g15.jpg” alt=”#15″ title=”#15″ /></a></li>
<li class=”lft”><a href=”#nogo”>
<img src=”g16.jpg” alt=”#16″ title=”#16″ /></a></li>
<li class=”rgt”><a href=”#nogo”>
<img src=”g17.jpg” alt=”#17″ title=”#17″ /></a></li>

<li class=”pad”></li>

<li class=”lft”><a href=”#nogo”>
<img src=”g18.jpg” alt=”#18″ title=”#18″ /></a></li>
<li><a href=”#nogo”>
<img src=”g19.jpg” alt=”#19″ title=”#19″ /></a></li>
<li><a href=”#nogo”>
<img src=”g20.jpg” alt=”#20″ title=”#20″ /></a></li>
<li><a href=”#nogo”>
<img src=”g21.jpg” alt=”#21″ title=”#21″ /></a></li>
<li><a href=”#nogo”>
<img src=”g22.jpg” alt=”#22″ title=”#22″ /></a></li>
<li><a href=”#nogo”>
<img src=”g23.jpg” alt=”#23″ title=”#23″ /></a></li>
<li class=”rgt”><a href=”#nogo”>
<img src=”g24.jpg” alt=”#24″ title=”#24″ /></a></li>
</ul>

“gallery” stilini kodlarımıza da yansıttık ve böylece resim galerimizi tam anlamıyla oluşturmuş olduk. Tek yapmanız gereken resim linklerini düzenlemek olacak ;) . Haa aklıma gelmiken :) , bu resim galerisi IE 6 ve Firefox‘ta sorunsuz çalışırken, Opera‘da resmi tam boyutta görünteleyemeye izin vermiyor.

Çalışmanın bir örneğini görmek için BURDAN buyrun…

Kaynak: CSS ile Resim Galerisi