Css ile resim galerisi
Etiketler :
css, resim, galeri, resim galerisi,
Okunma Sayısı : 111
Yayınlanma Tarihi : 23.04.2008
Yayınlayan : Akın Bostancı
|
Bu Makaleye 0
kişi puan vermiştir. Ortalama Puan: 0 |
Özet :
Css kullanarak yapabileceğimiz bir resim galerisi.. Üzerine gelince büyüyen / açılan resimlerle..
Aşağıdaki kodları kullanarak sayfamıza kolayca ekleyebiliriz..
Css kodu;
|
<style type="text/css">
.gallerycontainer { position: relative; }
.thumbnail img { border: 1px solid white; margin: 0 5px 5px 0; }
.thumbnail:hover { background-color: transparent; }
.thumbnail:hover img { border: 1px solid blue; }
.thumbnail span { position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; }
.thumbnail span img { border-width: 0; padding: 2px; }
.thumbnail:hover span{ visibility: visible; top: 0; left: 230px; z-index: 50; }
</style>
|
Html Kodu;
|
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"> <img src="tree_thumb.jpg" width="100px" height="66px" border="0" /><span> <img src="tree.jpg" /><br />www.webgelistir.net</span></a>
<a class="thumbnail" href="#thumb"> <img src="ocean_thumb.jpg" width="100px" height="66px" border="0" /> <span><img src="ocean.jpg" /><br />www.webgelistir.net</span></a>
<br />
<a class="thumbnail" href="#thumb"> <img src="horses_thumb.jpg" width="100px" height="70px" border="0" /><span> <img src="horses.jpg" /><br />www.webgelistir.net</span></a>
<br />
<a class="thumbnail" href="#thumb">Test 1<span> <img src="tree.jpg" /><br />www.webgelistir.net</span></a>
<br />
<a class="thumbnail" href="#thumb">Test 2<span> <img src="ocean.jpg" /><br />www.webgelistir.net</span></a>
</div>
|
Örneği çalışır durumda görmek için
tıklayın...
HTML DHTML CSS Kategorisinden Son Makaleler
Makale ile ilgili Yorumlar
Yorum ekleyebilmeniz için üye olmanız gerekmektedir.
Üye iseniz üye girişi yapınız..
Üye değilseniz, üye olmak için tıklayınız