Cara Membuat Smooth Sliding Keterangan Gambar Dengan CSS3

Cari Tutorial | Cara Smooth Sliding Kterangan Gambar Dengan CSS3 adalah keterangan gambar yang dapat digeser keluar di bagian sudut bawah gambar hanya bila pengguna Menggerakkan kursor mouse mendekati tanda tanya kecil yang terletak di bagian bawah gambar, ini adalah untuk meminimalkan gangguan pada gambar,

Lihat Demo

Sejauh ini, efeknya bekerja tanpa masalah dengan versi terbaru Chrome, FireFox, dan Opera tetapi tidak dengan Internet Explorer. Ini belum diuji pada Safari. Jadi bagaimana Anda menginstalnya ke blog Anda? Ikuti langkah-langkah di bawah ini.

• Pada dashboard Anda, di bawah halaman Desain, pergi ke Template dan klik pada "Edit HTML" kemudian "Lanjutkan".
• Klik“Expand Widget Templates”
• Gunakan Ctrl + F, cari ]] </ b: skin>
• Kemudian Copy Paste kode di bawah ini di atas kode ]] </ b: skin>

.capblock {
 display: block;
 position: relative;
 overflow: hidden;
 margin: 0 20px 20px 0;
}
.capblock a {
 color: #fff;
 text-decoration: none;
}
.capblock a:hover {
 color: #ccc;
 text-decoration: none;
}
.tbicap {
 position: absolute;
 color: #fff;
 text-decoration: none;
 background: #000;
 background: rgba(0,0,0,0.75);
 padding: 10px 10px;
 bottom: 5px;
 left: -10%;
 max-width: 400px;
 overflow: hidden;
 opacity: 0;
 -webkit-transition: all 0.6s ease;
 -moz-transition: all 0.6s ease;
 -ms-transition: all 0.6s ease;
 -o-transition: all 0.6s ease;
 -webkit-border-radius: 0px 5px 0px 0px;
 border-radius: 0px 5px 0px 0px;
}
.tbicap:hover {
 left: 0;
 opacity: 1;
}
.capblock:before {
 content: "?";
 position: absolute;
 font-weight: 800;
 background: #000;
 background: rgba(255,255,255,0.75);
 text-shadow: 0 0 5px #fff;
 color: #000;
 width: 24px;
 height: 24px;
 bottom: 10px;
 left: 10px;
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 border-radius: 12px;
 text-align: center;
 font-size: 14px;
 line-height: 24px;
 -moz-transition: all 0.6s ease;
 opacity: 0.75;
}
.capblock:hover:before {
 opacity: 0;
} 

Catatan: Jika judul yang tidak tampil sebagaimana mestinya, cobalah menyesuaikan bottom: 5px, dan jika Anda menggunakan gambar yang lebih besar kemudian menyesuaikan max-width: 400px;

Simpan template.

Untuk menggunakan caption geser baru pada gambar di posting Anda, pastikan bahwa Anda berada dalam modus HTML saat Anda melampirkan gambar Anda di dalam tag dengan atribut yang tepat seperti yang ditunjukkan pada contoh di bawah:

<div>
<a href="IMAGE LINK HERE" target="_blank"><img alt="" src="IMAGE URL HERE"/></a>
<div>
<span><a href="POST LINK HERE">CAPTION HERE</a></span></div>
</div>

Jangan lupa untuk mengganti semua nilai yang diperlukan dengan Anda sendiri. Anda juga dapat menghapus<a href="POST LINK HERE"> dan </a> jika Anda hanya ingin caption tanpa link untuk membuat itu unclickable.

Sekian Tutorial tentang Smooth Sliding Kterangan Gambar Dengan CSS3 semoga bermanfaat

Cara Membuat Smooth Sliding Keterangan Gambar Dengan CSS3 2012-12-12T01:06:00+07:00 Rating: 4.5 Diposkan Oleh: Unknown