Image Overlay Using CSS

Image overlay (sering juga disebut text over image) umumnya digunakan untuk deskripsi / caption dari gambar dalam slideshow / featured content dalam blog atau situs.

1. Markup HTML

<a href="#">
<span class="date">29 Februari 2010</span>
<img src="kaos-bloggingly.jpg" alt="this is post's thumbnail">
<p class="title">
Judul post ini pendek.
</p>
</a>

Karena pada umumnya image overlay merupakan tautan menuju halaman web lain, maka kita menggunakan anchor tags sebagai pembungkus / wrapper dari image overlay. Jika image overlay tidak digunakan sebagai tautan menuju halaman lain, anda bisa menggunakan div sebagai wrapper-nya.

2. Styling menggunakan CSS

Pada dasarnya, yang kita lakukan adalah:

  • Mem-float wrapper image overlay
  • Membuat position wrapper menjadi relative
  • Membuat position.title absolute
  • Mengeset date menjadi relative
  • Agar area text “meninggi keatas”, set bottom area .title
  • Atur z-index masing-masing area agar ‘layer’-nya tidak saling tumpang tindih

Untuk lebih jelasnya, baca komentar yang saya sertakan di file CSS berikut:

/* ------ Image Overlay ------ */
.link-to-post{
float:left; /* agar tinggi & lebar elemen ini fixed */
width:320px;
height:240px;
background:#bfbfbf;
padding:10px;
overflow:hide; /* menyembunyikan child element ini yang melebihi parent element ini  */
position:relative;
text-decoration:none;
margin:0 10px 0 0;
}

.link-to-post:hover{
background:#252826;
}

.link-to-post img{
border:0;
}

.title{
background:url(shadow-4x4.png); /* file .png transparan berukuran 4 X 4 piksel yang diulang-ulang */
color:#fff;
float:left;
position:absolute; /* position elemen ini dibuat absolute TERHADAP .link-to-post yang relative */
bottom:-6px; /* jarak child elemen TERHADAP sisi bawah parent elemen  */
padding:10px;
width:300px;
}

.date{
background:#000;
float:right;
font-style:italic;
font-size:12px;
font-weight:bold;
letter-spacing:-0.9px;
margin-bottom:-27px; /* margin bisa diset negatif, yang berarti "mendekatkan jarak elemen" */
padding:5px;
position:relative;
z-index:3; /* z-index mengatur "urutan layer" */
color:#efefef;
}

3. Memasang conditional stylesheet untuk IE 7 & IE 6

As always, kelakuan Internet Explorer selalu aneh-aneh sendiri. Stylesheet yang saya tulis diatas bekerja dengan baik di semua browser modern (FF 3.6, Safari, Google Chrome, Opera dan IE 8), tapi tidak terlihat bagus di IE 7 dan IE 6. Maka dari itu, cantumkan conditional tag ini di dalam area <head> dibawah link menuju stylesheet file yang diatas.

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="image-overlay-ie.css" />
<![endif]-->

Conditional tags diatas akan tidak akan dieksekusi di browser modern sedangkan Internet Explorer versi 7 kebawah akan mengeksekusi file image-overlay-ie.css.

4. Stylesheet untuk IE 7 & IE 6

Rapihkan elemen yang “tampak lain sendiri” pada browser IE 7 kebawah:

/* Image Overlay */
.date{
margin-top:-2px;
}

.link-to-post img{
margin-top:-20px;
}

p.title{
margin-left:-324px;
bottom:10px;
}

That’s it. Lihat demonya di halaman ini.

Bacaan lebih lanjut:

2 thoughts on “Image Overlay / Text Over Image Untuk Gambar Ber-caption

  1. Mantap Mantap kang tipsnya

  2. […] Image Overlay / Text Over Image Untuk Gambar Ber-caption […]

Share Your Thought