Bagaimana cara membuat deskripsi sliding gambar menggunakan CSS3 transisi di blog

Contoh dari CSS ini menunjukan bagaimana sebuah animasi panel deskripsi/penjelasan gambar yang dapat bergeser ketika mouse atau krusor diarahkan ke gambar. Gambar ini murni menggunakan CSS3 transisi.

Dengan gambar yang dikemas sedemikian rapih dalam sebuah wadah yang didalamnya disimpan deskripsi dari gambar tersebut.

View Demo

  

 MENAMBAHKAN KODE CSS DI BLOG

• Masuk ke akun blogger anda -> Klik Drop down menu

• Kemudian klik Template -> Edit HTML
• Cari tag / kode ]]></b:skin> tekan CTRL+F untuk memudahkan proses pencarian
• Selanjutnya pastekan kode CSS berikut tepat diatas kode  ]]></b:skin>  
• Klik Kode CSS di bawah ini:

Kode CSS

• Simpan Template ...

KODE HTML

• Tambahkan kode HTML berikut didalam postingan (HTML bukan compose) atau anda bisa meletaknnya di gadget HTML/Javascript
• Klik Tata letak -> Tambahkan gadget -> masukan kode didalamnya -> Simpan gadget.

<div class="imagepluscontainer" style="height: 199px; width: 263px; z-index: 2;">
<img src="http://i1087.photobucket.com/albums/j479/jalupangna/kanjengratu2.jpg" />
<br />
<div class="desc">
Menurut cerita Pantun Bogor,Palabuhan Ratu didirikan oleh Nyai Ratu Pu'un Purnama Sari.atau nyai Ratu Purnama Sari/Nyi Roro kidul <a href="http://jalu-pangna.blogspot.com/2012/12/legenda-nyi-mas-ratu-raras-tembang-sakti.html">Nyi Roro kidul</a> Putri Pertama Prabu Sedah Siliwangi dari Istrinya yang ke tujuh, yang saat itu Prabu Sedah Nusia Mulya bertahta di Pakuan Pajajaran Tengah.
</div>
</div>
<br />
<div class="imagepluscontainer" style="height: 199px; left: 350px; width: 263px;">
<img src="http://i1087.photobucket.com/albums/j479/jalupangna/kanjengratu2.jpg" />
<br />
<div class="desc rightslide">
Menurut cerita Pantun Bogor,Palabuhan Ratu didirikan oleh Nyai Ratu Pu'un Purnama Sari.atau nyai Ratu Purnama Sari/Nyi Roro kidul <a href="http://jalu-pangna.blogspot.com/2012/12/legenda-nyi-mas-ratu-raras-tembang-sakti.html">Nyi Roro kidul</a> Putri Pertama Prabu Sedah Siliwangi dari Istrinya yang ke tujuh, yang saat itu Prabu Sedah Nusia Mulya bertahta di Pakuan Pajajaran Tengah.
</div>
</div>
<br />
<div class="imagepluscontainer" style="height: 199px; width: 263px;">
<img src="http://i1087.photobucket.com/albums/j479/jalupangna/kanjengratu2.jpg" />
<br />
<div class="desc upslide">
Menurut cerita Pantun Bogor,Palabuhan Ratu didirikan oleh Nyai Ratu Pu'un Purnama Sari.atau nyai Ratu Purnama Sari/Nyi Roro kidul <a href="http://jalu-pangna.blogspot.com/2012/12/legenda-nyi-mas-ratu-raras-tembang-sakti.html">Nyi Roro kidul</a> Putri Pertama Prabu Sedah Siliwangi dari Istrinya yang ke tujuh, yang saat itu Prabu Sedah Nusia Mulya bertahta di Pakuan Pajajaran Tengah.
</div>
</div>
<br />
<div class="imagepluscontainer" style="height: 199px; left: 350px; width: 263px;">
<img src="http://i1087.photobucket.com/albums/j479/jalupangna/kanjengratu2.jpg" />
<br />
<div class="desc leftslide">
Menurut cerita Pantun Bogor,Palabuhan Ratu didirikan oleh Nyai Ratu Pu'un Purnama Sari.atau nyai Ratu Purnama Sari/Nyi Roro kidul <a href="http://jalu-pangna.blogspot.com/2012/12/legenda-nyi-mas-ratu-raras-tembang-sakti.html">Nyi Roro kidul</a> Putri Pertama Prabu Sedah Siliwangi dari Istrinya yang ke tujuh, yang saat itu Prabu Sedah Nusia Mulya bertahta di Pakuan Pajajaran Tengah.
</div>
</div>

 KETERANGAN:

1. Ganti warna kuning pada script diatas dengan URL/Link Gambar anda
2. Ganti warna merah muda pada script diatas dengan deskripsi (penjelasan) gambar anda
3. Anda bisa memilih salah satu dari 4 posisi panel deskripsi gambar sesuai dengan selera anda. Kalau mau salah satunya saja anda cukup menambahkan dari kode/tag <div class...sampai tag </div>
4. Ukuran gambar yang akan di deskripsikan adalah tidak lebih dari 263x199 pixel

Happy Blogging...!

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 20.35