Hallo teman-teman pada kesempatan kali ini saya akan membahas tentang Membuat Image Caption dengan Pseudo Class. sebelum kita memulainya saya berikan satu contoh image caption, teman-teman dapat melihatnya seperti pada gambar dibawah ini :

Membuat Image Caption dengan Pseudo Class

jadi pada gambar diatas itu merupakan contoh image caption dimana dalam sebuah gambar ada text/kalimat didalamnya. kalau untuk membuatnya di photoshop mungkin sangat mudah tinggal menambahkan text saja didalam sebuah gambarnya tapi kali ini kita akan membuatnya dengan menggunakan pseudo class yaitu :hover.
oke untuk lebih jelasnya mari kita praktekan saja langsung.
pertama tama siapkan text-editornya dan gambarnya lalu ketik script htmlnya seperti dibawah ini :

jika sudah dengan htmlnya maka selanjutnya masukan script css nya seperti dibawah ini :

Jika sudah html dan cssnya maka teman-teman simpan. kemudian langkah selanjutnya teman-teman coba jalankan/run di browser yang teman-teman gunakan.
maka hasilnya akan seperti pada gambar di bawah ini :
hasil sebelum dihover

Membuat Image Caption dengan Pseudo Class

hasil setelah dihover

Membuat Image Caption dengan Pseudo Class

oke jika hasilnya sudah seperti pada gambar diatas maka artinya teman-teman sudah berhasil dalam Membuat Image Caption dengan Pseudo Class.
oke untuk pembahasan kali ini dalam Membuat Image Caption dengan Pseudo Class.

cukup sampai disini dulu ya teman-teman.
semoga bermanfaat, sekian dan terimakasih.