Cara membuat Caption pada gambar dengan CSS + HTML

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Angga Rista October 22, 2020

Terkadang hal yang terlihat sangat mudah untuk di buat, tapi sebenarnya perlu tingkat kreatifitas yang agak tinggi untuk menerjemahkannya ke dalam website. Seperti membuat Caption yang berada di atas gambar. Berikut caranya.

Langkah – 1 Tambahkan HTML

<div class="container">
  <img src="notebook.jpg" alt="Notebook" style="width:100%;">
  <div class="content">
    <h1>Judul</h1>
    <p>Deskripsi</p>
  </div>
</div>

Langkah – 2 Tambahkan CSS

.container {
  position: relative;
  max-width: 800px;
  margin: 0 auto; 
}

.container .content {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0); 
  background: rgba(0, 0, 0, 0.5); 
  color: #f1f1f1; 
  width: 100%;
  padding: 20px;
}

Berikut adalah hasilnya

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  font-size: 17px;
}

.container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.container img {vertical-align: middle;}

.container .content {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}
</style>
</head>
<body>

<div class="container">
  <img src="https://images.unsplash.com/photo-1576675466684-456bcdeccfbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="Mountain" style="width:100%;">
  <div class="content">
    <h1>Judul</h1>
    <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.</p>
  </div>
</div>

</body>
</html>

CSS Image