Image With Sliding Description Panel Menggunakan CSS3

Ini adalah yang terbaik dari CSS3 untuk membuat panel deskripsi animasi gambar slide panel terbuka ketika mouse berguling ke gambar yang menggunakan CSS3 transitions.
Anda ingin menambahkan beberapa deskripsi untuk gambar apapun maka trik ini pasti akan sangat membantu Anda.

Trik ini adalah bekerja dengan CSS3 yaitu murni tidak ada JavaScript yang berat atau jQuery yang dapat mempengaruhi kecepatan loading dari blog/situs Anda.

beberapa fitur terbaik trik  ini:

1. Bekerja pada CSS3 murni yaitu tidak ada script yang berat diperlukan
2. Dapat digunakan dalam 4 cara (Atas, Bawah, Kiri, Bawah)
3. Menghaluskan efek hover.
4. Mudah digunakan dan beberapa fitur lainnya.

Di atas adalah beberapa fitur dari trik ini, sekarang mari kita lihat bagaimana menambahkan dan menggunakannya, pertama-tamasilahkan melihat demo dari panel bawah!

Live Demo ▼

---

Cara Menambah Image With Sliding Description Panel Menggunakan CSS3

---

Pertama-tama Anda harus menginstal kode Image With Sliding Description Panel Menggunakan CSS3 ini ke template blog/situs Anda. Caranya:


1. Login ke akun blogger.

2. Pada Dasbor klick Rancangan ➨ Edit HTML.

3. Centang Expand Template Widget ➨ Backup Template Anda.

4. Selanjutnya dalam Edit Template Anda cari kode ]]></b:skin> atau <style> Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

5. Bila sudah ketemu sekarang letakkan CSS3 berikut tepat di atasnya.

/*================ Sliding Description Panel For Images By Oto Website ================*/ .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 Oto Website ================*/

6. Simpan Template.

---

Cara Menggunakannya ?!?

---

Saat mengedit postingan.

Pergi ke Edit Postingan.
Tambahkan kode di bawah ini ke image/gambar Anda.

<center><div class="imagepluscontainer" style="width:263px;"> <img src="IMAGE URL DISINI"> <div class="desc downslide"> DESCRIPTION ANDA DISINI</div> </div></center>

Keterangan:

• Sekarang ganti DESCRIPTION ANDA DISINI dengan Descripttion atau kata-kata Anda.
• Anda juga dapat menambahkan link dalam deskripsi Anda dengan menggunakan kode ini  <a herf="LINK HERE">TEXT HERE</a>
• Ganti URL IMAGE DISINI dengan URL gambar Anda
• Jika Anda ingin mengubah posisi sliding panel kemudian hanya mengganti disorot ke bawah dengan atas, kanan atau kiri
• tinggal mengganti teks down dengan up,right atau left.
• Menyesuaikan lebar panel sesuai dengan lebar gambar untuk menyesuaikan lebar panel cukup mengedit width:263px.

Sekian!

Saya harap Anda menyukai trick yang saya bahas kali ini, dan jangan lupa untuk komentar dan tanggapan anda!