Membuat Keterangan Gambar Dengan CSS

Tweet

Membuat Keterangan Gambar dengan CSS - Keterangan pada sebuah Gambar yang di upload ke Blog akan sangat berguna bagi para visitor sob, yaitu untuk mengetahui penjelasan tentang Gambar tersebut. Nah sekarang Modif(y) Your Blog!! akan share Cara Membuat Keterangan Pada Gambar Dengan Css, kiat akan mencoba menampilkan Keterangan Pada Gambar dengan gaya hover saat pointer mouse berada pada Gambar tersebut. 

Dengan keterangan ini, maka 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. Apa itu Efek Hover? Silahkan arahkan kursor sobat ke gambar dibawah :

Modif(y) Your Blog!!
Cara Membuat Contact Form di Blog

Nah kalau sahabat tertarik untuk Membuat Keterangan Pada Gambar Dengan Css seperti yang sobat lakukan 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 sobat 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 sobat, 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 Modif(y) Your Blog share, semoga dapat bermanfaat, kurang lebihya mohon untuk dimaklumi. and happy blogging sob!!

Sobat suka dengan artikel ini? Pasang linkback di blog sobat.
<a href="http://modif-blogmu.blogspot.com/2012/07/membuat-keterangan-gambar-dengan-css_9706.html">Membuat Keterangan Gambar Dengan CSS</a>