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
positionwrapper menjadirelative - Membuat
position.titleabsolute - Mengeset date menjadi relative
- Agar area text “meninggi keatas”, set
bottomarea .title - Atur
z-indexmasing-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:
- Text Blocks Over Image (CSS-Tricks.com)
- Making Image Overlay Caption Using CSS (Tutsvalley.com)
Jauhari
11 April 2010
Mantap Mantap kang tipsnya
Toekangweb » 50 Tutorial CSS/XHTML dalam Bahasa Indonesia
16 May 2010
[...] Image Overlay / Text Over Image Untuk Gambar Ber-caption [...]