Beberapa waktu lalu saya menulis trik pembuatan pelindung gambar dengan CSS. Saya membaca komentar yang menarik dari Fikri Rasyid seperti ini:
Haha, kepikiran juga sama teknik ini. Biar otomatis mungkin pake jQuery supaya dia nyelipin container sendiri ke image di area konten kali ya, jadi ngga usah ngedit satu2 markup imagenya.
Benar, kalau harus mengedit markupnya satu per satu bisa jadi merepotkan.
Kita bisa membuatnya menjadi otomatis tanpa harus menggunakan jQuery. Yaitu dengan menambahkan pseudo element. Berikut ini kode yang telah dimodifikasi:
div.imgwrapper {
position:relative;
width:100%;
}
div.imgwrapper img {
width:100%;
}
div.imgwrapper:after {
content:"";
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:9; }
Mudah dan nggak pakai ribet. :D