Efek Slide pada Deskripsi Gambar

Efek Slide pada Deskripsi Gambar

Efek slide adalah efek pergerakan atau pergeseran suatu objek. Efek pergerakan itu dapat berupa naik turun atau ke kiri dan ke kanan yang melekat pada suatu objek. Kali ini saya berikan trick membuat efek slide pada gambar. Nantinya efek slide itu dapat diisi dengan deskripsi atau keterangan suatu gambar. Jadi gambar akan terlihat menarik dan atraktif. Minimal deskripsi gambar akan lebih menarik dari pada deskrips bawaan blogger sendiri. Deskripsi gambar yang diberi efek slide ini tidak terlalu memberatkan loading blog, karena hanya dibuat dengan css dan html yang sudah lolos validasi di W3C validator. Sekarang kita bahas cara membuat efek slide pada deskripsi gambar. Silahkan ikuti langkah berikut.

Cara membuat efek slide pada deskripsi gambar

• Log in ke blog anda
• Klik Entri Baru atau masuk kepada halaman pembuatan artikel
• Klik HTML di sebalah kanan Compose di bagian pojok kiri atas
• Masukkan css dan html berikut ke dalamnya

<style scoped="" type="text/css">
.imagepluscontainer{position:relative;text-align:center; z-index:1; font-family:verdana; font-size:13px}
.imagepluscontainer img{width:300px; position:relative;  z-index:2; transition:all 0.5s ease-in-out}
.imagepluscontainer:hover img{box-shadow:5px 5px 5px #777;transform:scale(1.05,1.05)}
.imagepluscontainer div.desc{position:relative; width:42%; display:inline-block; text-align:left; z-index:1; padding:8px; background:#D91E18; color:white; border-radius:0 0 8px 8px; opacity:0;box-shadow:0 0 6px rgba(0,0,0,0.8); transition:all 0.5s ease 0.5s}
.imagepluscontainer div.desc a{color:white}
.imagepluscontainer:hover div.desc{transform:translate(0,5%); opacity:1}
</style>
<div class="imagepluscontainer">
<img alt="JUDUL GAMBAR" src="ALAMAT GAMBAR" title="JUDUL GAMBAR" />
<div class="desc downslide">
TULIS KETERANGAN GAMBAR DI SINI</div>
</div>

• Silahkan edit kode merah sesuai petunjuk
• Kalau sudah, klik pratinjau dulu...apakah sudah sesuai keinginan
• Selanjutnya klik Publikasikan
• Sekarang artikel anda sudah dilengkapi dengan gambar yang dilengkapi efek slide

Sekarang mari kita lihat demonya di bawah ini. Silahkan arahkan kursor anda pada gambar dan lihat hasilnya.

Hallo...saya mbah dinan, ganteng gak saya?...hehehehee...

Saran: jangan terlalu panjang membuat deskripsi gambar agar jarak gambar tidak terlalu jauh dengan tulisan atau objek lainnya dalam posting.

CATATAN
.imagepluscontainer img{width:300px; (untuk menyesuikan lebar gambar dengan halaman posting)
.imagepluscontainer div.desc{position:relative; width:42%; (untuk menyesuaikan lebar kolom deskripsi)

Demikian penjelasan trick membuat efek slide pada deskripsi gambar di blog. Semoga artikel efek slide pada deskripsi gambar ini bermanfaat bagi semua, amin. Selamat mencoba dan sukses selalu. Salam sahabat blogger.

Share this post