Aneka Tampilan Gambar dengan CSS

Tampilan Model Gambar Satu

• 

  Masjid Haram

• 

  Masjid Al Aqsha

• 

  Masjid Nabawi

Kode HTML dan CSS Tampilan Model Gambar Satu

<style type="text/css">
·img-sedang {list-style:none;margin:0;padding:0;width:100%;}
/* Memberikan Garis Pinggir Warna Merah */
·img-sedang li {float:left;border:transparan 1px solid;margin:5px;padding:0;width:180px;height:160px;}
·img-sedang h3:hover {color:#000000;text-decoration:underline;}
·img-sedang img {border-radius:100%;-moz-border-radius:100%;width:160px;height:120px;}
·img-sedang img:hover {border-radius:2px;-moz-border-radius:2px;width:160px;height:120px;}
·img-sedang h3 {color:#FF0000;}
</style>

<ul class="img-sedang">
<li><center><a href="http://goo.gl/OlxtJ" target="_blank">
<img src="http://goo.gl/OlxtJ" alt="Masjid Haram"/></a>
<h3>Masjid Haram</h3></center></li>
<li><center>
<a href="http://goo.gl/tdrvH" target="_blank">
<img src="http://goo.gl/tdrvH" alt="Masjid Al Aqsha"/></a>
<h3>Masjid Al Aqsha</h3>
</center></li>
<li><center>
<a href="http://goo.gl/H3wpB" target="_blank">
<img src="http://goo.gl/H3wpB" alt="Masjid Istiqlal"/></a>
<h3>Masjid Istiqlal</h3>
</center></li>
<li><center>
<a href="http://goo.gl/pBx3u" target="_blank">
<img src="http://goo.gl/pBx3u" alt="Masjid Nabawi"/></a>
<h3>Masjid Nabawi</h3>
</center></li>
</ul>

Tampilan Model Gambar Dua

Kode HTML dan CSS Tampilan Model Gambar Dua

<style type="text/css">
·pulloutimage {position:relative;}
·pulloutimage img {position: absolute; /*absolute position and stack images inside container*/ left: 0;}
·pulloutimage img·ondemand {/*CSS for image shown on demand */opacity: 0;visibility: hidden; /* hide it initially (mainly for legacy browsers)*/width:100px;height:100px;}
·pulloutimage img·original{z-index: 1;/* set base z-index of initially shown image*/width:75px;height:75px;}
@-webkit-keyframes revealfromright {/*keyframe animation that slides a DIV out from another before overlapping later*/0%{/*Start of animation */z-index:-1;opacity: 0;} 50% {/*Half way point, move image to right edge of container*/opacity:1;z-index:-1;left:100%;box-shadow:none;} 51%{/* 51% point, stack animating image on top of original image*/ z-index: 2;} 100%{/* Final point, move animating image back so it's on top of original*/ left: 0;box-shadow: 8px 8px 15px gray;}}
@-moz-keyframes revealfromright {0%{z-index:-1;opacity:0;} 50%{opacity:1;z-index:-1;left:100%;box-shadow:none;}51%{z-index:2;} 100%{left:0;box-shadow: 8px 8px 15px gray;}}
@-ms-keyframes revealfromright{0%{z-index:-1;opacity:0;} 50%{opacity:1;z-index:-1;left:100%;box-shadow: none;} 51%{z-index:2;} 100% {left:0;box-shadow: 8px 8px 15px gray;}}
·pulloutimage:hover img·ondemand{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */ -webkit-animation-name:revealfromright; /* specify animation keyframe */ -webkit-animation-duration: 1s;-webkit-animation-iteration-count: 1;-moz-animation-name:revealfromright;-moz-animation-duration: 1s;-moz-animation-iteration-count: 1;-ms-animation-name:revealfromright;-ms-animation-duration: 1s;-ms-animation-iteration-count: 1;animation-name:revealfromright;animation-duration: 1s;animation-iteration-count: 1;visibility:visible;opacity:1;box-shadow: 8px 8px 15px gray;z-index:2;}
·pulloutimage:hover img·original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */ opacity:0·5;}
</style>
<div class="pulloutimage" style="width:100px; height:100px">
<img class="original" src="http://goo.gl/Kehkt"/>
<img class="ondemand" src="http://goo.gl/Kehkt"/>
</div>
<br/>
<div class="pulloutimage" style="width:100px; height:100px">
<img class="original" src="http://goo.gl/fNv2d"/>
<img class="ondemand" src="http://goo.gl/fNv2d"/>
</div>
<br/>
<div class="pulloutimage" style="width:100px; height:100px">
<img class="original" src="http://goo.gl/ixw9k"/>
<img class="ondemand" src="http://goo.gl/ixw9k"/>
</div>
<br/>
<div class="pulloutimage" style="width:100px; height:100px">
<img class="original" src="http://goo.gl/ixw9k"/>
<img class="ondemand" src="http://goo.gl/ixw9k"/>
</div>

Tampilan Model Gambar Tiga

Alamanda berasal dari Brazilia, Amerika Selatan. Nama Ilmianya Alamanda cathartica, di Indonesia dikenal dengan sebutan Alamanda. Tinggi batang bisa mencapai 6 meter, pohon berkayu, tumbuh merambat. Daunnya tumbuh pada batang atau cabang, selalu empat lembar dan melingkari batang. Karakteristik daun berujung runcing, tebal dan memanjang serta biasanya agak terpilin bagian tepinya.

Alamanda dapat dipergunakan sebagai tanaman herbal dengan cara daunnya direbus hingga airnya mendidih, lalu hirup uap air rebusan daun tersebut sedikit demi sedikit untuk menghilangkan sakit batuk. Untuk menghilangkan sakit perut, rebus akarnya lalu minum air rebusan akar Alamanda

Kembang Sepatu, nama ilmiahnya Hibicus rosa sinensis. Kembang Sepatu dapat dipergunakan sebagai tanaman herbal, air rebusan akarnya dapat menetralkan daya racun yang berbahaya, selain itu dapat juga menyembuhkan sakit sariawan dan sakit radang tenggorokan. Untuk penyakit bronkhitis dapat memanfaatkan air rebusan bunga Kembang Sepatu.

Karakteristik tanaman Kembang Sepatu, tinggi tanaman bisa mencapai 4 meter, daunnya berbentuk hati merucing berlekukan.Bunganya berbentuk seperti lonceng atau terompet, serta Warnanya bunganya bisa merah atau merah muda. Usia bunga dewasa hanya dua hari setelah itu bunganya akan layu.

Kode HTML dan CSS Tampilan Model Gambar Tiga

<style type="text/css">
·somediv {width: 100%;clear: left;border: 1px solid gray;}
·somediv ·boxkiri {float: left;width: 155px;}
·somediv ·boxkiri p {margin-top: 0;margin-left: 155px;}
·somediv ·boxkanan {float: right;width: 155px;}
·somediv ·boxkanan p {margin-top: 0;margin-left: 155px;}
*html ·somediv p {/* IE 3px jog hack*/ height: 1%;}
</style>

<div class="somediv">
<div class="boxkiri">
<img border="0" src="http://goo.gl/VIr8l" width="151" height="113"/>
</div>
<p>Alamanda..,</p>

<div class="boxkanan">
<img border="0" src="http://goo.gl/fNv2d" width="151" height="113"/>
</div>
<p>Kembang Sepatu,...</p>
</div>

Tampilan Model Gambar Empat

Bunga Mahkota Putih
Bunga Terompet Ungu

Bunga Terompet Pink
Karangan Bunga
Gambar Bunga 1
Bunga Mahkota Pink
Gambar Bunga 2
Bunga Matahari Mahkota Pink

Kode HTML dan CSS Tampilan Model Gambar Empat

<style type="text/css">
·gallerycontainer{position: relative;/*Add a height attribute and set to largest image's height to prevent overlaying*/}
·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{/*CSS for enlarged image*/position: absolute;background-color: lightyellow;padding: 5px;left: -1000px;border: 1px dashed gray;visibility: hidden;color: black;text-decoration: none;}
·thumbnail span img{ /*CSS for enlarged image*/ border-width: 0;padding: 2px;}
·thumbnail:hover span{ /*CSS for enlarged image*/visibility: visible;top: 0;left: 230px; /*position where enlarged image should offset horizontally */ z-index: 50;}
</style>

<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img src="http://goo.gl/Kehkt" width="100px" height="66px" border="0"/><span><img src="http://goo.gl/Kehkt"/><br/>Bunga Mahkota Putih</span></a>
<a class="thumbnail" href="#thumb"><img src="http://goo.gl/miABi" width="100px" height="66px" border="0"/><span><img src="http://goo.gl/miABi"/><br/>Bunga Terompet Ungu</span></a>
<br/> <a class="thumbnail" href="#thumb"><img src="http://goo.gl/fNv2d" width="100px" height="75px" border="0"/><span><img src="http://goo.gl/fNv2d"/><br/>Bunga Terompet Pink</span></a> 
<a class="thumbnail" href="#thumb"><img src="http://goo.gl/sM2vo" width="100px" height="70px" border="0" /><span><img src="http://goo.gl/sM2vo"/><br/>Karangan Bunga</span></a>
<br/> <a class="thumbnail" href="#thumb">Gambar Bunga 1<span><img src="http://goo.gl/VIr8l"/><br/>Bunga Mahkota Pink</span></a> <br/> <a class="thumbnail" href="#thumb">Gambar Bunga 2<span><img src="http://goo.gl/6b8FV"/><br/>Bunga Matahari Mahkota Pink</span></a>
</div>

Tampilan Model Gambar Lima

Masjidil Haram pertama kali dibangun oleh Nabi Ibrahim Alaihissalam bersama Nabi Ismail Alaihissalam, pembangunannya pertama kali dilakukan dengan Membangun Ka'bah atas perintah Allah azza wa jalla, lalu dilanjutkan dengan membangun dinding Masjid. Adapun perluasan dilakukan oleh Khalifah Umar Bin Khattab radhiyallahu'anh tahun 638 Masehi, dilanjutkan oleh Khalifah Utsman bin Affan radhiyallahu'anh sekitar 647 Masehi. Imam Besar Masjid Haram saat ini adalah Syaikh Abdurrahman As Sudais.

Masjid Al Aqsha arti harfiahnya Masjid Terjauh. Masjid Al Aqsa pada awalnya merupakan rumah ibadah berukuran kecil yang didirikan oleh Umar Bin Khattab radhiyallahu'anh. Renovasi Masjid Al Aqsa dilakukan oleh Khalifah Abdul Malik dan Putranya Al Walid tahun 705 Masehi, Khalifah Abbasiyah Al Mansur tahun 754 Masehi, Khalifah Al Mahdi tahun 780 Masehi, lalu yang terakhir adalah Khalifah Fatimiyyah Ali Azh Zhahir tahun 1033 Masehi.

Masjid Istiqlal adalah Masjid terbesar di Asia Tenggara. Istiqlal artinya Merdeka, ide pendirian Masjid Istiqlal diprakarsai oleh KH. Wahid Hasyim, H. Anwar Tjokroaminoto dan KH. Taufiqurrahman pada tahun 1950

Masjid Nabawi Merupakan masjid kedua yang dibangun oleh Rasulullah shallahu'alaihi wasallam, setelah Masjid Quba. Bersama para Sahabat dan kaum Muslimin, Rasulallahu shallahu'alaihi wasallam membangun Masjid Nabawi. Perluasan Masjid dilakukan oleh Khalifah Umar bin Khattab radhiyallahu'anh pada 17 Hijriah, Khalifah Utsman bin Affan radhiyallahu'anh pada 29 Hijriah, Raja Abdul Aziz dari kerajaan Saudi Arabia meluaskan Masjid ini menjadi 6.024 meterpersegi pada 1372 Hijriah, Raja Fahd pada 1414 Hijriah menjadi 100.000 meter persegi ditambah lantai atap mencapai luas 67.000 meter persegi dan pelataran masjid seluas 135.000 meter persegi. Masjid Nabawi kini dapat menampung kurang lebih 535.000 jamaah.

Kode HTML dan CSS Tampilan Model Gambar Lima

<style type="text/css">
·imagepluscontainer {/* main image container */ position: relative; z-index: 1;}
·imagepluscontainer img { /* CSS for image within container */position: relative;z-index: 100;width:263px;
height:199px;-moz-transition: all 0·5s ease; /* Enable CSS3 transition on all props */-webkit-transition: all 0·5s ease-in-out;-o-transition: all 0·5s ease-in-out;
-ms-transition: all 0·5s ease-in-out;transition: all 0·5s ease-in-out;}
·imagepluscontainer:hover img { /* CSS for image when mouse hovers over main container */ z-index:400;-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0·5);-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0·5);box-shadow: 5px 5px 5px rgba(0, 0, 0, 0·5);-moz-transform: scale(1·05, 1·05);-webkit-transform: scale(1·05, 1·05);
-ms-transform: scale(1·05, 1·05);-o-transform: scale(1·05, 1·05); 
transform: scale(1·05, 1·05);}
·imagepluscontainer div·desc { /* CSS for desc div of each image· */position: absolute;width:90%;z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */left: 5px;padding: 8px;background: rgba(0, 0, 0, 0·8); /* black bg with 80% opacity */color: white;-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;opacity: 0; /* Set initial opacity to 0 */-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0·8); /* CSS3 shadows */-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0·8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0·8);-moz-transition: all 0·5s ease 0·5s; /* Enable CSS3 transition on desc div· Final 0·5s value is the delay before animation starts */-webkit-transition: all 0·5s ease 0·5s;-o-transition: all 0·5s ease 0·5s;
-ms-transition: all 0·5s ease 0·5s;transition: all 0·5s ease 0·5s;}
·imagepluscontainer div·desc a {color: Crimson;font-weight:bold;}
·imagepluscontainer:hover div·desc { /* CSS for desc div when mouse hovers over main container */
-moz-transform: translate(0, 100%);-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);-o-transform: translate(0, 100%);transform: translate(0, 100%);opacity:1; /* Reveal desc DIV fully */}
/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/
·imagepluscontainer div·rightslide{width:150px; /* reset from default */
top:15px;right:0;left:auto;  /* reset from default */
bottom:auto;  /* reset from default */padding-left:15px;
-moz-border-radius: 0 8px 8px 0;-webkit-border-radius: 0 8px 8px 0;border-radius: 0 8px 8px 0;}
·imagepluscontainer:hover div·rightslide{width:350px;font-size:14px;-moz-transform: translate(100%, 0);-webkit-transform: translate(100%, 0);-ms-transform: translate(100%, 0);-o-transform: translate(100%, 0);
transform: translate(100%, 0);}
/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/
·imagepluscontainer div·leftslide {width: 150px;  /* reset from default */
top:15px;left:0;bottom:auto;  /* reset from default */padding-left:15px;-moz-border-radius: 8px 0 0 8px;-webkit-border-radius: 8px 0 0 8px;border-radius: 8px 0 0 8px;}
·imagepluscontainer:hover div·leftslide {width:300px;font-size:14px;-moz-transform: translate(-100%, 0);-webkit-transform: translate(-100%, 0);-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);transform:translate(-100%, 0);}
/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/
</style>

<div class="imagepluscontainer" style="width:263px; height:199px; z-index:2;">
<img src="http://goo.gl/OlxtJ" alt="Masjid Haram"/>
<div class="desc rightslide">
<a href="http://goo.gl/t8mXn">Masjidil Haram</a> pertama kali 
</div>
</div>
<br/>
<div class="imagepluscontainer" style="width:263px; height:199px; left:350px;">
<img src="http://goo.gl/tdrvH" alt="Masjid Al Aqsha"/>
<div class="desc leftslide">
<a href="http://goo.gl/0Pjyb">Masjid Al Aqsha</a> arti harfiahnya 
</div>
</div>
<br/>
<div class="imagepluscontainer" style="width:263px; height:199px; left:350px;">
<img src="http://goo.gl/H3wpB" alt="Masjid Istiqlal"/>
<div class="desc leftslide">
<a href="http://goo.gl/hfzhc">Masjid Istiqlal</a> adalah Masjid terbesar</div>
</div>
<br/>
<div class="imagepluscontainer" style="width:263px; height:199px;">
<img src="http://goo.gl/pBx3u" alt="Masjid Nabawi"/>
<div class="desc rightslide">
<a href="http://goo.gl/VKjVW">Masjid Nabawi</a> Merupakan 
</div>
</div>

Tampilan Model Gambar Enam

360 degree spin onMouseover and onMouseout

60 degree spin onMouseover and onMouseout

-360 degree spin onMouseover ONLY

Kode HTML dan CSS Tampilan Model Gambar Enam

<style type="text/css">
p#socialicons img{/* 1st set of icons. Rotate them 360deg onmouseover and out */ -moz-transition: all 0.8s ease-in-out&#59;-webkit-transition: all 0.8s ease-in-out&#59;-o-transition: all 0.8s ease-in-out&#59;-ms-transition: all 0.8s ease-in-out&#59;transition: all 0.8s ease-in-out&#59;width:50px&#59;height:50px&#59;}
p#socialicons img:hover{-moz-transform: rotate(360deg)&#59;-webkit-transform: rotate(360deg)&#59;-o-transform: rotate(360deg)&#59;-ms-transform: rotate(360deg)&#59;transform: rotate(360deg)&#59;}
p#socialicons2 img { /* 2nd set of icons. Rotate them 60deg onmouseover and out */-moz-transition: all 0.2s ease-in-out&#59;-webkit-transition: all 0.2s ease-in-out&#59;-o-transition: all 0.2s ease-in-out&#59;-ms-transition: all 0.2s ease-in-out&#59;transition: all 0.2s ease-in-out&#59;}
p#socialicons2 img:hover{-moz-transform: rotate(70deg)&#59;-webkit-transform: rotate(70deg)&#59;-o-transform: rotate(70deg)&#59;-ms-transform: rotate(70deg)&#59;transform: rotate(70deg)&#59;}
p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */}
p#socialicons3 img:hover{-moz-transition: all 0.5s ease-in-out&#59;-webkit-transition: all 0.5s ease-in-out&#59;-o-transition: all 0.5s ease-in-out&#59;-ms-transition: all 0.5s ease-in-out&#59; transition: all 0.5s ease-in-out&#59;-moz-transform: rotate(-360deg)&#59;-webkit-transform: rotate(-360deg)&#59;-o-transform: rotate(-360deg)&#59;-ms-transform: rotate(-360deg)&#59;transform: rotate(-360deg)&#59;}
</style>

<p><b>360 degree spin onMouseover and onMouseout</b></p>
<p id="socialicons">
<a href="http://goo.gl/bReOS">
<img border="0" src="http://goo.gl/bReOS" alt="icon"/></a>
<a href="http://goo.gl/bReOS">
<img border="0" src="http://goo.gl/bReOS" alt="icon"/></a>
<a href="http://goo.gl/bReOS">
<img border="0" src="http://goo.gl/bReOS" alt="icon"/></a>
<a href="http://goo.gl/bReOS">
<img border="0" src="http://goo.gl/bReOS" alt="icon"/></a>
<a href="http://goo.gl/bReOS">
<img border="0" src="http://goo.gl/bReOS" alt="icon"/></a>
</p>

<p><b>60 degree spin onMouseover and onMouseout</b></p>
<p id="socialicons2">
<a href="http://goo.gl/c8aY0">
<img border="0" src="http://goo.gl/c8aY0" alt="icon"/></a>
<a href="http://goo.gl/c8aY0">
<img border="0" src="http://goo.gl/c8aY0" alt="icon"/></a>
<a href="http://goo.gl/c8aY0">
<img border="0" src="http://goo.gl/c8aY0" alt="icon"/></a>
<a href="http://goo.gl/c8aY0">
<img border="0" src="http://goo.gl/c8aY0" alt="icon"/></a>
<a href="http://goo.gl/c8aY0">
<img border="0" src="http://goo.gl/c8aY0" alt="icon"/></a>
</p>

<p><b>-360 degree spin onMouseover ONLY</b></p>
<p id="socialicons3">
<a href="http://goo.gl/2oJxQ/">
<img border="0" src="http://goo.gl/2oJxQ" alt="icon"/></a>
<a href="http://goo.gl/2oJxQ/">
<img border="0" src="http://goo.gl/2oJxQ" alt="icon"/></a>
<a href="http://goo.gl/2oJxQ/">
<img border="0" src="http://goo.gl/2oJxQ" alt="icon"/></a>
<a href="http://goo.gl/2oJxQ/">
<img border="0" src="http://goo.gl/2oJxQ" alt="icon"/></a>
<a href="http://goo.gl/2oJxQ/">
<img border="0" src="http://goo.gl/2oJxQ" alt="icon"/></a>
</p>

Tampilan Model Gambar Tujuh

Daftar List Bunga :

1. Terompet Mahkota PinkTerompet Mahkota Pink Berlatar Belakang Hitam
2. Mahkota PinkMahkota Pink Berlatar Belakang Taman
3. Terompet Mahkota PinkTerompet Mahkota Pink Berlatar Belakang Hitam
4. Mahkota PinkMahkota Pink Berlatar Belakang Taman
5. Terompet Mahkota PinkTerompet Mahkota Pink Berlatar Belakang Hitam
6. Mahkota PinkMahkota Pink Berlatar Belakang Taman

Simply beautiful.
So real, it's unreal. Or is it?

Kode HTML dan CSS Tampilan Model Gambar Tujuh

<style type="text/css">
·thumbnailist{position: relative;z-index: 0;}
·thumbnailist:hover{background-color: transparent;z-index: 50;}
·thumbnailist span{ /*CSS for enlarged image*/position: absolute;background-color: lightyellow;padding:5px;left: -1000px;border: 1px dashed gray;visibility: hidden;color: black;text-decoration: none;}
·thumbnailist span img{/*CSS for enlarged image*/border-width: 0;padding: 2px;}
·thumbnailist:hover span{ /*CSS for enlarged image on hover*/visibility: visible;top: 0;left: 60px; /*position where enlarged image should offset horizontally */}
</style>

<p>Daftar List Bunga :</p>
<ol>
<li><a class="thumbnailist" href="#thumb">Terompet Mahkota Pink<span><img src="http://goo.gl/fNv2d"/>Terompet Mahkota Pink Berlatar Belakang Hitam</span></a></li>
<li><a class="thumbnailist" href="#thumb">Mahkota Pink<span><img src="http://goo.gl/VIr8l"/>Mahkota Pink Berlatar Belakang Taman</span></a> 
</li>
<li><a class="thumbnailist" href="#thumb">Terompet Mahkota Pink<span><img src="http://goo.gl/fNv2d"/>Terompet Mahkota Pink Berlatar Belakang Hitam</span></a></li>
<li><a class="thumbnailist" href="#thumb">Mahkota Pink<span><img src="http://goo.gl/VIr8l"/>Mahkota Pink Berlatar Belakang Taman</span></a> 
</li>
<li><a class="thumbnailist" href="#thumb">Terompet Mahkota Pink<span><img src="http://goo.gl/fNv2d"/>Terompet Mahkota Pink Berlatar Belakang Hitam</span></a></li>
<li><a class="thumbnailist" href="#thumb">Mahkota Pink<span><img src="http://goo.gl/VIr8l"/>Mahkota Pink Berlatar Belakang Taman</span></a> 
</li>
</ol>
<br/>
<br/>
<a class="thumbnailist" href="#thumb"><img src="http://goo.gl/Kehkt" width="100px" height="66px" border="0"/><span><img src="http://goo.gl/Kehkt"/><br/>Simply beautiful.</span></a>
<a class="thumbnailist" href="#thumb"><img src="http://goo.gl/miABi" width="100px" height="66px" border="0"/><span><img src="http://goo.gl/miABi"/><br/>So real, it's unreal. Or is it?</span></a>

Sumber Kode : Dynamic Drive

Artikel Terkait

css tenribs terbaru

Arsip Blog

Game