✔ Cara Menciptakan Goresan Pena Pada Gambar | Keterangan
Cara Membuat Tulisan Pada Gambar | Keterangan Pada sebuah Gambar yang di upload ke Blog akan sangat mempunyai kegunaan bagi para pengunjung untuk mengetahui klarifikasi perihal Gambar tersebut. Nah
Sekarang akan mencoba share Cara Membuat Keterangan Pada Gambar Dengan Css, Dimana kita akan mencoba menampilkan Keterangan Pada Gambar dengan gaya hover ketika pointer mouse berada pada Gambar tersebut.
Tampilan Gambar pun akan semakin menarik alasannya ialah Keterangan Gambar akan muncul apabila Pointer Mouse berada pada Area Gambar tersebut. Efek hover yang di berikan pun cukup bagus untuk dilihat alasannya ialah pengaruh hover ini akan bergerak dari bawah keatas.
Sahabat ingin memasang nya silahkan ikuti langkah nya dibawah ini.
2. Untuk menciptakan caranya gampang tinggal pilih Rancangan >> Edit HTML
3. Lalu cari isyarat ]]></b:skin> dan copykan isyarat CSS dibawah ini diatas nya.
#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;
}
4.Silahkan Pratinjau dulu sebelum disimpan/save ,Kalau tidak ada dilema kemudian simpan tempelat/savefloat: 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;
}
6. Untuk sanggup menampilkannya pada Gambar sobat harus menciptakan postingan gres kemudian masukan isyarat dibawah ini didalam isi postingan yang akan dimasukan Gambar Lihat Script dibawah ini.
<div id="gambar">
<img src="url Gambar" />
<div class="ket">
<b>JUDUL</b><br />
Isi dari keterangan Gambar Disini
</div>
</div>
<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 sanggup share Cara ini sedang hit di Google Plus, biar sanggup bermanfaat, kurang lebihya mohon untuk dimaklumi. sekian dan terimakasih.
Belum ada Komentar untuk "✔ Cara Menciptakan Goresan Pena Pada Gambar | Keterangan"
Posting Komentar