0 Image Sliding Panel Deskripsi Menggunakan CSS3 Untuk Blog

Ini  trik CSS3 terbaik untuk menambahkan panel deskripsi animasi pada gambar yang dapat digeser terbuka ketika mouse menyentuh  gambar menggunakan CSS3. Kamu ingin menambahkan beberapa deskripsi untuk gambar apapun maka trik ini pasti akan membantu kamu, ketika mouse menyentuh gambar panel animasi teks keluar dengan deskripsi yang Anda memiliki, kelebihan dari trik ini bekerja dengan CSS3 yaitu murni tidak ada JavaScript yang berat atau jQuery yang dapat mempengaruhi kecepatan loading blog. ini adalah beberapa Fitur yang terbaikdari  CSS3 -

1. Bekerja dengan CSS3 murni yaitu tidak ada script yang berat diperlukan
2. Dapat digunakan dalam 4 cara (Up, Down, Left, Right) 
3. Efek hover yang halus.
4. Mudah digunakan pada template Anda.

Sekarang mari kita lihat bagaimana menambahkan menggunakannya, pertama kita lihat demonya bawah ini,
 

Bila suatu saat aku jatuh cinta Penuhilah hatiku dengan bilangan cinta-Mu yang tak terbatas Biar rasaku pada-Mu tetap utuh.

Cara Tambah Sliding Panel Deskripsi Untuk Gambar?

Pertama kita akan menambahkan kode CSS untuk blog, ikuti instruksi di bawah ini untuk menambahkan kode css, 

1. Pertama pergi ke Blogger Dashboard> Template
2. Klik Pada Edit HTML
3. Tekan tombol Lanjutkan
4. Temukan  kode ini       ]]></b:skin>      dalam template Anda

  Tambahkan kode di bawah ini tepat di atas / sebelum kode di atas,

 

Klik Open Untuk Membuka

/*================ Sliding Description Panel For Images By DraftBloger ================*/ .imagepluscontainer { /* main image container */ position: relative; z-index: 1; font-family: verdana; font-size: 13px; } .imagepluscontainer img { /* CSS for image within container */ position: relative; z-index: 2; -moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */ -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .imagepluscontainer:hover img { /* CSS for image when mouse hovers over main container */ -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); -moz-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } .imagepluscontainer div.desc { /* CSS for desc div of each image. */ position: absolute; width: 90%; z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */ bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */ left: 5px; padding: 8px; background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */ color: white; -moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */ -webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; opacity: 0; /* Set initial opacity to 0 */ -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */ -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); -moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */ -webkit-transition: all 0.5s ease 0.5s; -o-transition: all 0.5s ease 0.5s; -ms-transition: all 0.5s ease 0.5s; transition: all 0.5s ease 0.5s; } .imagepluscontainer div.desc a { color: white; } .imagepluscontainer:hover div.desc { /* CSS for desc div when mouse hovers over main container */ -moz-transform: translate(0, 100%); -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); -o-transform: translate(0, 100%); transform: translate(0, 100%); opacity: 1; /* Reveal desc DIV fully */ } /*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/ .imagepluscontainer div.rightslide { width: 150px; /* reset from default */ top: 15px; right: 0; left: auto; /* reset from default */ bottom: auto; /* reset from default */ padding-left: 15px; -moz-border-radius: 0 8px 8px 0; -webkit-border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0; } .imagepluscontainer:hover div.rightslide { -moz-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -o-transform: translate(100%, 0); transform: translate(100%, 0); } /*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/ .imagepluscontainer div.leftslide { width: 150px; /* reset from default */ top: 15px; left: 0; bottom: auto; /* reset from default */ padding-left: 15px; -moz-border-radius: 8px 0 0 8px; -webkit-border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px; } .imagepluscontainer:hover div.leftslide { -moz-transform: translate(-100%, 0); -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); } /*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/ .imagepluscontainer div.upslide { top: 0; bottom: auto; /* reset from default */ padding-bottom: 10px; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; } .imagepluscontainer:hover div.upslide { -moz-transform: translate(0, -100%); -webkit-transform: translate(0, -100%); -ms-transform: translate(0, -100%); -o-transform: translate(0, -100%); transform: translate(0, -100%); } /*================ Sliding Description Panel For Images By DraftBloger ================*/

Cara Menggunakannya?


Saat mengedit posting,

1. Pergi ke tab Edit HTML
2. Tambahkan kode di bawah ,
3.  

<center><div class="imagepluscontainer" style=" width:300px; ">

 <img src=" PASANG URL GAMBAR DISINI "> <div class="desc down slide">

 PASANG DESKRIPSI KAMU DISINI </div> </div></center>

• Sekarang ganti PASANG DESKRIPSI KAMU DI SINI dengan deskripsi Anda, Anda juga dapat menambahkan link dalam deskripsi Anda dengan menggunakan kode <a herf="LINK DISINI">TEKS DISINI</a>
• Ganti URL GAMBAR DISINI dengan URL gambar Anda
• Jika Anda ingin mengubah posisi sliding panel,  hanya mengganti  down dengan up, left atau right
• Sesuaikan lebar panel sesuai dengan lebar gambar untuk menyesuaikan lebar panel cukup mengedit width: 300px;

Kemudian simpan lihat hasilnya kerenkan!!!

Saya harap Anda menyukainya,  kalo suka berikan komentar... Happy  Bloging !