Cara Membuat Label Atau Tag Menempel di Gambar Dengan CSS

Bila kalian melihat website - website film, biasanya dalam gambar cover sebuah film terdapat sebuah tulisan yang menempel di gambar tersebut entah itu status film, keterangan dll. Nah kali ini kita akan membuat tulisan yang berada dalam gambar tadi. Apa saja bahan yang dibutuhkan?

Alat & bahan :

• Text editor (Notepad++, Sublime, Atom, dsb)
• Gambar
• Browser

Cara Membuat :

Pertama buka text editor dan ketikkan code berikut.

Kedua, untuk style atau css nya ketikkan code berikut.

Untuk hasilnya akan seperti ini :

See the Pen Membuat Label/Tag di Dalam Gambar by Eko Setya (@ekosetya) on CodePen.

Penjelasan :

Pada code html kita buat tag div untuk membuat gambar dan text menjadi satu lalu kita beri class "image" agar kita bisa men-styling atau memperindahnya. 

Lalu dalam tag div terdapat tag img yang berfungsi untuk menampilkan gambar kita, untuk mengubah gambarnya tinggal ganti pada bagian src. 

Masih dalam tag div, dibawah tag img terdapat tag span yang berfungsi untuk menampilkan text. tag span ini bisa kamu ganti dengan tag p, text, atau tag yang berfungsi untuk menampilkan gambar lainnya. Nah pada tag ini kita buat posisinya menjadi absolute atau pasti, yang dimaksud pasti disini adalah tag yang memiliki posisi absolute akan ada di sana selamanya dan tidak akan berubah/ berpindah tempat. 

Lalu kita tambahkan style top dan left kemudian buat menjadi 0px . Ini artinya posisi dari tag ini akan berada di pojok kiri atas. Ini bisa kamu ganti dengan Top ,Bottom, Left, Right tinggal kamu sesuaikan saja.

Nah itu tadi cara membuat label atau tag menempel pada gambar dengan css. Maaf bila tutorial ini membingungkan karena saya juga masih belajar bagaimana cara membuat tutorial yang baik, benar dan menarik. Bila kalian ada kritik dan saran silahkan berikan di kolom komentar dan Terima Kasih telah berkunjung ^-^