Cara Membuat Posisi Teks Di Atas Gambar(Image Text)

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

by Hanifah Nurbaeti January 27, 2021

Di bawah ini kita akan mempelajari cara memposisikan teks di atas gambar. Posisinya dapat berada di atas kanan, atas kiri, tengah, bawah kanan dan bawah kiri.

Image Text

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Cara menempatkan teks di atas gambar:</p>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" alt="mountaint" style="width:100%;">
  <div class="bottom-left">Text Bawah Kanan</div>
  <div class="top-left">Text Atas Kanan</div>
  <div class="top-right">Text Atas Kiri</div>
  <div class="bottom-right">Text Bawah Kiri</div>
  <div class="centered">Text Tengah</div>
</div>

</body>
</html>

Berikut ini langkah-langkahnya

Langkah 1) Tambahkan HTML:
Contoh

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" alt="mountaint" style="width:100%;">
  <div class="bottom-left">Text Bawah Kanan</div>
  <div class="top-left">Text Atas Kanan</div>
  <div class="top-right">Text Atas Kiri</div>
  <div class="bottom-right">Text Bawah Kiri</div>
  <div class="centered">Text Tengah</div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/* Container yang menampung gambar dan teks */
.container {
  position: relative;
  text-align: center;
  color: white;
}

/* Teks kiri bawah */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Teks kiri atas */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Teks kanan atas */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Teks kanan bawah  */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Teks tengah */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}