Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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.


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 «

7 komentar:

  1. bos.,.,.,,.???
    blogku malah gak bisa di buka
    tolong.,. Plizzz

    BalasHapus
  2. punya saya ko' tidak bisa rata tengah ya
    pasti setiap menampilkan gambarnya selalu di kiri atau di kanan

    BalasHapus
  3. saya memilh Penempatan rata tengah yg berada di semua entri\posting karena saya selalu memasukkan gambar gambar ditengah agar kelihatan lebih menarik, untuk mengimbangi artikel artikel yang saya buat,.,.,.,

    \m/

    Pizz

    BalasHapus
  4. mas, aku udah nyoba di 2 blog aku,http://mybluestars-forever.blogspot.com/2010/10/belitung-island.html dan http://masih-belajar-di.blogspot.com/2010/10/nyobian.html

    Tadinya mau buat percobaan dan perbandingan (marginnya aku atur sendiri),tapi kok tampilannya jadi beda ya? harus diapain biar sama kayak blog pertama tuh..?

    thx b4

    BalasHapus
  5. iya, mas...udah bisa. "search"nya waktu itu udh ngikutin instruksinya, tp kok malah geser ke kiri benar..? jadi search-nya nggak pas box gitu...

    BalasHapus
  6. Komentar ini telah dihapus oleh pengarang.

    BalasHapus

 
GR | Edited by | gubhug reyot