Home » , » Membuat galeri foto dengan css

Membuat galeri foto dengan css

Written By Trik dan berita on Minggu, 29 April 2012 | Minggu, April 29, 2012

Membuat galeri foto dengan css. oke kembali lagi membahas tentang css, trik kali ini adalah membuat galeri  foto untuk website dan blog.

galeri foto sendiri banyak sekali manfaatnya, dan buat anda yang mau menambahkan galeri foto di website atau blog silahkan di praktekkan cara berikut ini.
sebelumnnya , silahkan lihat contoh berikut ini:

Bad Boy


Disini Deskripsi gambar

Sentuh Gambar nya gan
Cewek korea


Disini Deskripsi gambar
Cewek korea


Disini Deskripsi gambar
Cewek korea


Disini Deskripsi gambar
Cewek korea


Disini Deskripsi gambar
Cewek korea


Disini Deskripsi gambar




























nah... itulah contohnya, memang keren kan..
jika anda tertarik untuk membuatnya , berikut ini cara-caranya:
silahkan copy kode berikut dan pastekan di website atau blog anda, untuk blogspot bisa di pasang di dalam postingan , jika website ya bisa di pasang di postingan juga.
<style type="text/css">
.zinto {
background-color: #BBB;
border:1px solid #FFF;
padding: 2px;
font: 11px/1.4em Arial, sans-serif;
-moz-box-shadow: 0 0 5px 2px #FFF;
-webkit-box-shadow: 0 0 5px 2px #fff;
box-shadow: 0 0 5px 2px #fff;
}
.zinto img {
border: 1px solid #CCCCCC;
vertical-align:middle;
margin-bottom: 3px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
z-index:1;
}
.zinto img:hover {
height:250px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
-ms-transform:scale(1.5);
-moz-box-shadow: 0 0 5px 2px blue;
-webkit-box-shadow: 0 0 5px 2px blue;
box-shadow: 0 0 5px 2px blue;
z-index:2;
border:5px solid #BBB;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.left {
margin: 0.3em 0.9em 0.5em 0;
float:left;
text-align:center;
font-size:13px;
}
.left a{
color:blue;
}
.left a:hover {
color:red;
}
</style>
<div class="zinto left" style="width:150px; height:250px;">
<img src="http://2.bp.blogspot.com/-fswcs0sv268/Tj9ZuPniLyI/AAAAAAAAAMs/Nm7zA0Pk6PE/s1600/bad_boys_sm.jpg" alt="Bad Boy" height="200" width="150" />
<br />
Disini Deskripsi gambar<br />
Sentuh Gambar nya gan
</div>
<div class="zinto left" style="width:150px; height:250px;">
<img src="http://1.bp.blogspot.com/_Ivm7sB8wNvA/TUo4qKEmX7I/AAAAAAAAAAc/1GzFHN43QI8/s1600/cute-korean-girl-beach03.jpg" alt="Cewek korea" height="200" width="150" />
<br />
Disini Deskripsi gambar
</div>
<div class="zinto left" style="width:150px; height:250px;">
<img src="http://www.eanext.com/wp-content/plugins/wp-o-matic/cache/715e0_cute_asian+girl+hairstyle.jpg" alt="Cewek korea" height="200" width="150" />
<br />
Disini Deskripsi gambar
</div>
<div class="zinto left" style="width:150px; height:250px;">
<img src="http://i664.photobucket.com/albums/vv1/Green-Smoke/Asian%20So%20Hot%201/Sexy_Korean_Girl__1_7.jpg" alt="Cewek korea" height="200" width="150" />
<br />
Disini Deskripsi gambar
</div>
<div class="zinto left" style="width:150px; height:250px;">
<img src="http://3.bp.blogspot.com/_dfmX39fI7H8/SmW6DsIVzbI/AAAAAAAAB-s/kmtZOCKHumo/s400/Seo_You_Jin_Beauty_Korean_Girl_2.jpg" alt="Cewek korea" height="200" width="150" />
<br />
Disini Deskripsi gambar
</div>
<div class="zinto left" style="width:150px; height:250px;">
<img src="http://t2.gstatic.com/images?q=tbn:ANd9GcTabQ1XAuwVA1D9eunFRM-PynXL1o-G8uKV4QCW3-QKcoTrJ0_mnxDlUKOD" alt="Cewek korea" height="200" width="150" />
<br />
Disini Deskripsi gambar
</div>

Catatan: silahkan ganti yang warna biru dengan url gambar kamu dan ganti yang warna merah dengan keterangan gambar kamu.


Popular Posts

VIDEO LUCU HARI INI

Blog Archive

Top Dan Unik. Diberdayakan oleh Blogger.
Topics :