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 ▼







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!

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top