Cara Menciptakan Label Atau Tag Melekat Di Gambar Dengan Css

Bila kalian melihat website - website film, biasanya dalam gambar cover sebuah film terdapat sebuah goresan pena yang melekat di gambar tersebut entah itu status film, keterangan dll. Nah kali ini kita akan menciptakan goresan pena yang berada dalam gambar tadi. Apa saja materi yang dibutuhkan?

Alat & materi :

• 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 jadinya akan menyerupai 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 menciptakan gambar dan text menjadi satu kemudian kita beri class "image" semoga kita sanggup 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 sanggup kau 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 niscaya disini ialah tag yang mempunyai 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 sanggup kau ganti dengan Top ,Bottom, Left, Right tinggal kau sesuaikan saja.

Nah itu tadi cara menciptakan label atau tag melekat pada gambar dengan css. Maaf jikalau tutorial ini membingungkan sebab aku juga masih mencar ilmu bagaimana cara menciptakan tutorial yang baik, benar dan menarik. Bila kalian ada kritik dan saran silahkan berikan di kolom komentar dan Terima Kasih telah berkunjung ^-^