Membuat Image Caption Dengan CSS

Membuat Image Caption Dengan CSS
Banyak cara untuk menempatkan Caption,
Di Blogger tampilan terbaru pun semakin dipermudah.
Tapi yang kita bahas kali ini adalah dengan menggunakan CSS.
Dan supaya lebih menarik lagi, caption akan dibuat muncul ketika kursor masuk dalam area image.
Dan untuk mempercepat loading halaman, kode yang disematkan adalah murni CSS tanpa ada penambahan javascript.
Contoh CSS Image Caption adalah seperti pada gambar di bawah.

Arahkan kursor pada gambar atau klik gambar bila anda menggunakan handphone, maka akan muncul diskripsi yang telah kita tuliskan.

Arahkan kursor ke gambar ini Membuat Image Caption Dengan CSS
Deskripsi akan muncul ketika kursor diarahkan ke gambar ini

Kode untuk CSS:

#content {
position:absolute;
top:90px;
left:0;
bottom:30px;
right:0;
overflow:auto;
padding:10px;
text-align:left
}


.imgteaser {
margin:5px;
overflow:hidden;
float:left;
position:relative
}


.imgteaser a {
text-decoration:none;
float:left;
position:relative
}


.imgteaser a:hover {
cursor:pointer
}


.imgteaser a .more {
position:absolute;
right:0px;
bottom:2px;
font-size:10pt;
color:#fff;
background:#000;
padding:0px;
filter:alpha(opacity=65);
opacity:.65;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"
}


.imgteaser a:hover .desc {
display:block;
font-size:10pt;
padding:0;
background:#111;
filter:alpha(opacity=65);
opacity:.65;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
color:#fff;
position:absolute;
bottom:2px;
left:0px;
padding:10px;
margin:0;
width:97%;
border-top:;
text-align:left
}


.imgteaser a:hover .desc strong {
display:block;
margin-bottom:0px;
font-size:10pt
}


.imgteaser a {
text-align:right
}


.imgteaser a .desc {
display:none
}


.imgteaser a:hover .more {
visibility: hidden
}

Kode untuk HTML:

<div class="imgteaser">
<a href="#"> <img alt="" src="Url Image"> 
<span class="more">  Keterangan  </span> 
<span class="desc"> 
<strong>Judul</strong> 
Deskripsi</span></a>
</div>

Baca Juga:
Cara Agar Custom Domain Blogger Bisa Diakses Tanpa WWW

cara membuat tulisan di dalam gambar html, jenis caption yang digunakan untuk menambahkan keterangan pada gambar disebut, css image adalah, cara membuat gambar berderet ke samping di html, menambah gambar atau icon di samping teks dengan css, cara membuat gambar bisa di klik di css, cara menampilkan gambar di css, materi css image gallery <.div>