Blog Yan: Image Gallery dengan CSS3

Bagi yang sering menampilkan gambar berikut deskripsinya sebagai materi posting, images gallery and hidden description with animation using CSS3 transition-transformation menjadi amat menarik untuk digunakan. Mini images gallery ini sangat selain dapat digunakan sebagai sebuah images gallery dapat juga digunakan untuk menampilkan gambar dalam bentuk tunggal (satu gambar) dan amat kompatible untuk browser yang sudah mengakomodir CSS3 untuk memberikan berbagai efek terbaru seperti Mozilla Firefox, Opera, Google Chrome dan Safari serta beberapa browser yang lain. Disamping gambar ditampilkan dalam bentuk animasi, deskripsi juga ditampilkan secara tersembunyi sehingga halaman blog menjadi terlihat amat minimalis.
Deskripsi gambar dibuat tersembunyi secara rapi dibagian bawah gambar dengan memanfaatkan tag p berikut span. Deskripsi gambar akan terlihat hanya dibagian judul ketika mouse berada di atas gambar, baru kemudian seluruh deskripsi menjadi terlihat secara keseluruhan ketika mouse diarahkan di atas judul deskripsi. Untuk membuat gambar dan deskripsi ini menjadi lebih menarik, sampeyan bisa memberikan judul deskripsi menggunakan kata atau kalimat yang membuat pengunjung blog secara otomatis mengarahkan cursor ke bagian judul. Pasti akan menjadi sangat menarik dan membuat kita tertantang untuk memunculkan kreatifitas yang membuat semua orang mungkin penasaran menyimak deskripsi secara total.

Supaya lebih jelas memahami bagaimana sebenarnya bentuk gambar serta deskripsi yang semuanya terangkai sebuah animasi ini.
Untuk membuatnya silahkan lakukan prosedur berikut.

Login : Login to Blogger (login ke blogger)
Dasboard (Dasbor) : Setelah halaman dasboard terbuka, KLIK link Design atau Rancangan.
Design (Rancangan) : KLIK ""Edit HTML".
Find Code : Cari kode CSS ]]></b:skin>
Copy-paste : Copy dan pastekan kode CSS di atas ]]></b:skin>
Catatan : Gunakan Ctrl + F (pada keyboard) untuk mencari kode HTML atau CSS dan Javascript stiap kali melakukan pencarian kode supaya lebih mudah dan cepat.
SAVE (Simpan) Template : KLIK SAVE Template dan lanjutkan dengan menggunakan xHTML di bagian body atau di ruang posting blog.
Open Blog : Buka blog untuk melihat hasil sekaligus pengecekan hasil.

Kode CSS3

bgsGRnodetail, .bgsGRnodetail2 {     height: 220px;     width: 149px;     border: 6px solid transparent;     opacity: 0.6;     -o-transition: all 1s ease-in-out;     -moz-transition: all 1s ease-in-out;     -webkit-transition: all 1s ease-in-out;     margin: 10px;     padding: 3px;     overflow: hidden;     border-radius: 6px;     -moz-border-radius: 6px;     -webkit-border-radius: 6px;      position: relative;     float: left;     filter:alpha(opacity=60);     }.bgsGRnodetail {     box-shadow: 1px 1px 10px #fff;     -moz-box-shadow: 1px 1px 10px #fff;     -webkit-box-shadow: 1px 1px 10px #fff;     }.bgsGRnodetail2 {     box-shadow: 1px 1px 10px #000;     -moz-box-shadow: 1px 1px 10px #000;     -webkit-box-shadow: 1px 1px 10px #000;     }.bgsGRnodetail:hover, .bgsGRnodetail2:hover {     height: 265px;     border-color: #333;     background: #fff;     opacity: 1.0;     -o-transform: scale(1.3);     -moz-transform: scale(1.3);     -webkit-transform: scale(1.3);     z-index: 9;     filter:alpha(opacity=100);     }.bgsGRnodetail:hover{     box-shadow:1px 3px 18px #fff;     -moz-box-shadow:1px 3px 18px #fff;     -webkit-box-shadow:1px 3px 18px #fff;     }.nodetai2:hover {     box-shadow: 1px 3px 18px #000;     -moz-box-shadow: 1px 3px 18px #000;     -webkit-box-shadow: 1px 3px 18px #000;     }.bgsGRnodetail img, .bgsGRnodetail2 img {     width: 140px;     height: 210px;     margin: 0;     padding: 0;     border: 4px solid #777;     border-radius: 4px;     -moz-border-radius: 4px;     -webkit-border-radius: 4px;     }.bgsGRnodetail p, .bgsGRnodetail2 p {     font-family: Tahoma;     font-size: 12px;     color: #99CCFF;     background: #999;     padding: 12px 6px;     border-radius: 4px;     -moz-border-radius: 4px;     -webkit-border-radius: 4px;      border: 1px solid #444;     height: 15px;     box-shadow: 0px 1px 2px #222;     -moz-box-shadow: 0px 1px 2px #222;     -webkit-box-shadow: 0px 1px 2px #222;     -o-transition: all 1s ease-in-out;     -moz-transition: all 1s ease-in-out;     -webkit-transition: all 1s ease-in-out;     overflow: hidden;     margin: 5px 2px 4px;     text-align: center;     }.bgsGRnodetail p:hover, .bgsGRnodetail2 p:hover {      -o-transform: scale(1.0) translate(0, -222px);     -moz-transform: scale(1.0) translate(0, -222px) ;     -webkit-transform: scale(1.0) translate(0, -222px);     height: 237px;     border-color: red;     background: #222;      border-color: red;      opacity: 0.8;     text-shadow: 0px 1px 2px #000;     font-size: 10px;     }.bgsGRnodetail p span, .bgsGRnodetail2 p span {     color: #CCCCFF;      text-shadow: 1px 1px 1px #000;     }.bgsGRnodetail p:hover span, .bgsGRnodetail2 p:hover span {     margin-top: 20px;     padding-top: 40px;     font-family: Tahoma;      font-weight: bold;     color: yellow;     font-size: 12px;     }

Kode xHTML

<div style="margin: 20px auto; padding: 20px; background: #333; height: 260px; position: relative; width: 565px; display: block;"><div class="bgsGRnodetail"><img src="http://img.theomegaproject.org/thumbs/2010/05/250.jpg" />Hover me! Image Enlarge - Show Description on Hover Image. Font size change JavaScript code provides a uniform, readily available means of adjusting text size rather than expecting users to find the varying browser provided mechanisms for doing so.</div><div class="bgsGRnodetail"><img src="http://img.theomegaproject.org/thumbs/2010/05/212.jpg" />Descriptions here! Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image.</div><div class="bgsGRnodetail"><img src="http://img.theomegaproject.org/thumbs/2010/05/250.jpg" />Descriptions here! Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image.</div></div>

Kode xHTML tunggal

Catatan

<div style="margin: 20px auto; .... etc berfungsi untuk membentuk box gallery.

.bgsGRnodetail dan .bgsGRnodetail2 atau div class="bgsGRnodetail" dan div class="bgsGRnodetail2"

Gambar Tunggal : Apabila ingin menampilkan 1 gambar saja (tunggal), sampeyan cukup gunakan:
<div class="bgsGRnodetail"><a href="" target= ... etc atau
<div class="bgsGRnodetail2"><a href="" target= ... etc
Ukuran gambar/image dapat dirubah dengan melakukan perubahan nilai width, height pada kode CSS.

Salam buat sobat blogger ... ...

Aku hanyalah seorang blogger yang kebetulan suka nulis, suka ngenet dan terutama suka uothak-uathik template blogspot. Bila sampeyan menyukai semua yang telah aku coba tulis dan terbitkan, aku hanya berharap bahwa semuanya bisa memberi manfaat dan mungkin juga bisa memberi dorongan untuk terus nglembur, nulis dan selalu memeras otak menuangkan hal-hal baru yang bermanfaat bagi pembaca. O, ....ya ..., Orang-orang atau tetangga sebelah biasa memanggil ku dengan sebutan si gubhug reyo gila, "yang suka melek malam dengan asap lintingan tak pernah telat". Yah ... moga-moga saja sampeyan semua nggak ikutan memanggil ku seperti para tetangga sebelah! Makacih, ya, atas kunjungannya. Maap nggak bisa kasih wedang kopi ma roti bolu!

Silahkan buka link di bawah ini untuk mengikuti tutorial menarik lainnya:
http://Iyan Bjm.blogspot.com