KNCI
KAWAH PAPANDAYAN
Home > > > Cara Membuat Keterangan Pada Gambar Dengan Css

Cara Membuat Keterangan Pada Gambar Dengan Css

Cara Membuat Keterangan Pada Gambar Dengan Css - Keterangan pada sebuah Gambar yang di upload ke Blog akan sangat berguna bagi para pengunjung untuk mengetahui penjelasan tentang Gambar tersebut. Nah sekarang sundaboy akan mencoba share Cara Membuat Keterangan Pada Gambar Dengan Css, Dimana kita akan mencoba menampilkan Keterangan Pada Gambar dengan gaya hover saat pointer mouse berada pada Gambar tersebut.

Tampilan Gambar pun akan semakin menarik karena Keterangan Gambar akan muncul apabila Pointer Mouse berada pada Area Gambar tersebut. Efek hover yang di berikan pun cukup cantik untuk dilihat karena efek hover ini akan bergerak dari bawah keatas.


Untuk Demo Keterangan Pada Gambar Dengan Css Silahkan klick :

DEMO


Nah kalau sahabat tertarik untuk Membuat Keterangan Pada Gambar Dengan Css seperti pada Demo diatas silahkan sahabat ikuti langkah langkah dibawah ini :

1. Login ke Blogger

2. Edit HTML

3. Cari kode ]]></b:skin>

4. Copy kode Css dibawah ini dan letakan tepat diatas kode ]]></b:skin>

#gambar {
float: left;
margin: 10px;
overflow: hidden;
position: relative;
}
.ket {
width: 80%;
height: auto;
text-align: left;
padding: 5px 10px;
background: #000;
opacity: 0.6;
color: #fff;
line-height: 18px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif; 
-webkit-border-radius: 0x 25px 0px 0px;
-moz-border-radius: 0px 25px 0px 0px;
-o-border-radius: 0px 25px 0px 0px;
border-radius: 0px 25px 0px 0px;
}
#gambar .ket {
position: absolute;
bottom: 0;
left: 0;
margin-bottom: -300px;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#gambar:hover {
-webkit-box-shadow:0px 0px 25px #000000;
-moz-box-shadow:0px 0px 25px #000000;
-o-box-shadow:0px 0px 25px #000000;
box-shadow:0px 0px 25px #000000;
}
#gambar:hover .ket {
margin-bottom: 0px;
}

5. Save Template

6. Untuk bisa menampilkannya pada Gambar sahabat harus membuat postingan baru lalu masukan kode dibawah ini didalam isi postingan yang akan dimasukan Gambar

<div id="gambar">
<img src="url Gambar" />
<div class="ket">
<b>JUDUL</b><br />
Isi dari keterangan Gambar Disini
</div>
</div>

7. Ganti Url Gambar dengan Url Gambar milik sahabat, Ganti JUDUL dengan Judul Gambar, Ganti Isi dari keterangan Gambar Disini dengan Keterangan Gambar

8. Save dan lihatlah hasilnya

Nah itulah Cara Membuat Keterangan Pada Gambar Dengan Css yang dapat sundaboy share, semoga dapat bermanfaat, kurang lebihya mohon untuk dimaklumi. sekian dan terimakasih

Ditulis Oleh : Yudus | Media Sharing Sundaboy

Sahabat sedang membaca tulisan Cara Membuat Keterangan Pada Gambar Dengan Css. Yang ditulis oleh sundaboy Grt. Apabila sahabat ingin menyebar luaskan artikel ini untuk kepentingan umum, dimohon untuk menyertakan Link sumber dibawah ini. Untuk Kritik dan sarannya sahabat bisa mengirimkan pada kotak komentar dibawah, atau melalui email sundaboy88@gmail.com. tengkyu

Tags: ,

12 komentar:

  1. keren gan, terimakasih ya

    BalasHapus

  2. Geuning sae kang?
    Bisaan wae si akang.
    Bade di coba geura ku abdi engke. Nuhun akang nya?
    Abdi mah da teu apal nu kitu, da masih newbie :)

    BalasHapus

  3. Seglong :
    haha hatur nuhun tos mampir deu kang bos,,,

    newbie kumaha, sakitu situs anu akangmah pengunjungna loba wae, teu siga anu abdi saetik wae hik hik

    BalasHapus

  4. wah mba di blog saya ga bisa diterapkan..efeknya ga muncul??
    apa tergantung template blognya ya??

    BalasHapus

  5. Noeroel:
    waduh saya dipanggil mba haha, saya bukan mba kang bos....

    kalau efeknya tidak muncul coba penerapan kodenya diperbaiki mungkin ada yang salah. karena secaraq default kode diatas bisa berjalan dengan baik pada semua template. coba di cek lagi gan. tengyu

    BalasHapus

  6. iya mas sudah bisa..kalo saya tempatin script CSS dulu setelah kode head pas nulis postingan...oh ya mas kalo buat ngatur align gambarnya gimna ya supaya di tengah cus saya udah utak atik tapi tetap dikiri terus ...

    BalasHapus

  7. noeroel :
    kalau gambarnya pengen di tengah ganti aja left menjadi center dan absolute menjadi center juga. kalau untuk keterangan gambar ganti saja margin-bottom: 0px; sesuai dengan keinginan, bisa dari tengah, kanan, atas, dll

    BalasHapus

  8. yes,akhirnya nemuin juga yang saya cari"
    makasih mz dah share info nya...
    mampir ke gubug saya mz bila berkenan,,^^
    tq b4

    BalasHapus

  9. cuma mau nanya, kalau mau di buat berderet horizontal bagaimana gan

    BalasHapus

  10. keren euy... abdi ge urang sunda keudah tiasa ah... hehe...

    nuhun kang...

    BalasHapus

  12. Bang,kalo biar gambar nya banyak dan diletakan berdampingan gimana yaa bang?
    Mohon Bantuannya kali bang

    BalasHapus

=================================
- Berkomentarlah Yang Sopan
- Tidak Diperkenankan Memasukan Link Aktif Pada Isi Komentar
- Berkomentarlah Sesuai Dengan Content
=================================