Home
Blogging

Membuat Image Caption Dengan CSS

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 seperti gambar diatas.


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>



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>

Post a Comment