Image Gallery and Hidden Descriptions with Animation using CSS3 Transition-Transformation

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, silahkan sampeyan lihat dengan membuka link demo di bawah ini.

D E M O

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 CSS Image and Hidden Descriptions


Kode CSS :
.bgsGRnodetail, .bgsGRnodetail2{
       height: 220px;
       width: 149px;
       border: 6px solid transparent;
       opacity: 0.6;
       filter:alpha(opacity=60);
       -o-transition: all 1s ease-in-out;
       -moz-transition: all 1s ease-in-out;
       -webkit-transition: all 1s ease-in-out;
       margin: 10px; /* original code by : http://gubhugreyot.blogspot.com */
       padding: 3px;
       overflow: hidden;
       border-radius: 6px;
       position: relative;
       float: left;
       filter:alpha(opacity=60);
}
.bgsGRnodetail{
       box-shadow: 1px 1px 10px #fff;
}
.bgsGRnodetail2{
       box-shadow: 1px 1px 10px #000;
}
.bgsGRnodetail:hover, .bgsGRnodetail2:hover{
       height: 265px;
       border-color: #333;
       background: #fff;
       opacity: 1.0;
       filter:alpha(opacity=100);       
       -o-transform: scale(1.3);
       -moz-transform: scale(1.3);
       -webkit-transform: scale(1.3);
       z-index: 9;
}
.bgsGRnodetail:hover{
       box-shadow:1px 3px 18px #fff;
}
.nodetai2:hover{
       box-shadow: 1px 3px 18px #000;
}
.bgsGRnodetail img, .bgsGRnodetail2 img{
       width: 140px;
       height: 210px;
       margin: 0; /* original code by : http://gubhugreyot.blogdetik.com */
       padding: 0;
       border: 4px solid #777;
       border-radius: 4px;
}
.bgsGRnodetail p, .bgsGRnodetail2 p{
       font-family: Tahoma;
       font-size: 12px;
       color: #99CCFF;
       background: #999;
       padding: 12px 6px;
       border-radius: 4px;
       border: 1px solid #444;
       height: 15px;
       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;
       filter:alpha(opacity=80);
       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;
}

xHTML-1 (Gallery-1) Image and Hidden Descriptions


xHTML :
<div style="margin: 20px auto; padding: 20px; background: #333; height: 260px; position: relative; width: 565px; display: block;">
<div class="bgsGRnodetail">
<img src="http://gubhugreyotdemoimg.googlecode.com/svn/GRimg01-140x210.jpg" /><p><span>Title (Hover me)!</span><br /><br /><br />Description here!</p>
</div>
<div class="bgsGRnodetail">
<img src="http://gubhugreyotdemoimg.googlecode.com/svn/GRimg04-140x210.jpg" /><p><span>Title (Hover me)!</span><br /><br /><br />Description here!</p>
</div>
<div class="bgsGRnodetail">
<img src="http://gubhugreyotdemoimg.googlecode.com/svn/GRimg11-140x210.jpg" /><p><span>Title (Hover me)!</span><br /><br /><br />Description here!</p>
</div>
</div>

xHTML-2 (Gallery-2) Image and Hidden Descriptions


xHTML :
<div style="margin: 20px auto; padding: 20px; background: #eee; height: 260px; position: relative; width: 565px;">
<div class="bgsGRnodetail2">
<a href="http://gubhugreyot.blogdetik.com"><img src="http://gubhugreyotdemoimg.googlecode.com/svn/GRimg01-140x210.jpg" /></a><p align="center"><span>Title here (Hover me!)</span><br /><br /><br />Description here!</p>
</div>
<div class="bgsGRnodetail2">
<a href="http://tantytm.blogspot.com"><img src="http://gubhugreyotdemoimg.googlecode.com/svn/GRimg04-140x210.jpg" /></a><p><span>Title here (Hover me!)</span><br /><br /><br />Description here!</p>
</div>
<div class="bgsGRnodetail2">
<a href="http://gitosimin.blogspot.com"><img src="http://gubhugreyotdemoimg.googlecode.com/svn/GRimg11-140x210.jpg" /></a><p><span>Title here (Hover me!)</span><br /><br /><br />Description here!</p>
</div>
</div>

Catatan/Keterangan :
  • <div style="margin: 20px auto; .... etc berfungsi untuk membentuk box gallery.
    • .bgsGRnodetail dan .bgsGRnodetail2 atau div class="bgsGRnodetail" dan div class="bgsGRnodetail2" berfungsi untuk menciptakan perbedaan tampilan gambar termasuk di background dan border.
  • Gambar Tunggal : Apabila ingin menampilkan 1 gambar saja (tunggal), sampeyan cukup gunakan:
    <div class="bgsGRnodetail"><a href="" title=" ... etc atau
    <div class="bgsGRnodetail2"><a href="" title=" ... etc
  • Desain ini diperuntukkan untuk image dengan ukuran width = 140px dan height = 210px
  • Anda dapat menggabungkannya dengan lightbox untuk mempreview-kan image yang berukuran lebih besar!
  • Ukuran gambar/image dapat dirubah dengan melakukan perubahan nilai width, height pada kode CSS.
  • Untuk penggunaan di halaman posting harus diingat bahwa semua kode (xHTML) wajib dibuat dalam bentuk rapat (tanpa putus). Anda bisa lihat contohnya di bawah ini!

Contoh Kode bentuk rapat:

Contoh xHTML rapat :
<div style="margin: 20px auto; padding: 20px; background: #eee; height: 260px; position: relative; width: 565px;"><div class="bgsGRnodetail2"><a href="http://gubhugreyot.blogdetik.com"><img src="http://gubhugreyotdemoimg.googlecode.com/svn/GRimg01-140x210.jpg" /></a><p align="center"><span>Title here (Hover me!)</span><br /><br /><br />Description here!</p></div><div class="bgsGRnodetail2"><a href="http://tantytm.blogspot.com"><img src="http://gubhugreyotdemoimg.googlecode.com/svn/GRimg04-140x210.jpg" /></a><p><span>Title here (Hover me!)</span><br /><br /><br />Description here!</p></div><div class="bgsGRnodetail2"><a href="http://gitosimin.blogspot.com"><img src="http://gubhugreyotdemoimg.googlecode.com/svn/GRimg11-140x210.jpg" /></a><p><span>Title here (Hover me!)</span><br /><br /><br />Description here!</p></div></div>

xHTML untuk Menampilkan Gambar Tunggal-1


xHTML :
<div class="bgsGRnodetail">
<img src="http://gubhugreyotdemoimg.googlecode.com/svn/GRimg01-140x210.jpg" /><p><span>Hover me!</span><br /><br /><br /> Description here!</p>
</div>

xHTML untuk Menampilkan Gambar Tunggal-2


xHTML :
<div class="bgsGRnodetail2"><a href="" target="_blank">
<img src="http://gubhugreyotdemoimg.googlecode.com/svn/GRimg11-140x210.jpg" /></a><p><span>Title here!</span><br /><br /><br /> Description here!</p>
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Senin PON, Maret, 04, 2012

» Happy Blogging - gubhugreyot «

Comments

Post a Comment