Image Caption


Seperti yang kita ketahui bahwa CSS dapat mempercantik tampilan web. Kali ini kita akan membahas caption pada suatu gambar dan bagaimana membuatnya.

Caption adalah bagian dari gambar yang berupa tulisan mengenai diskripsi umum dari isi sebuah foto. Biasanya ditulis untuk membantu memahami atau menilai gambar.biasanya hanya berisi beberapa kata atau beberapa kalimat pendek. Apabila gambar kurang dapat diterangkan dengan menggunakan sebuah caption, maka diperlukan kalimat panjang.

Kita dapat menambahkan caption untuk sebuah gambar dalam web, hal ini akan menjadikan web semakin menarik. Berikut langkah-langkahnya:

  1. Buat file css untuk mengatur / mengkonfigurasi tampilan pada html dan body, beri nama cption.css
    1
  2. Tambahkan script css berikut pada file cption.css. Disini kita membuat class imgteaser, dimana hasilnya caption akan dimunculkan ketika mouse berada di atas gambar.
    2
  3. Buat file baru dengan nama caption.html, kemudian tambahkan script di bawah ini
    3

Berikut adalah hasil dari program diatas:

4Selamat mencoba, semoga bermanfaat, aamiin.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s