Cara Membuat Teks Blok Pada Gambar(Image)

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

by Hanifah Nurbaeti January 27, 2021

Di bawah ini kita akan mempelajari cara membuat teks blok pada gambar(Image Text Blocks). Image Text Block ini akan dibuat menggunakan HTML dan CSS.

Image Text Blocks

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  font-family: Arial;
}

.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}
</style>
</head>
<body>

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

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/21236-shinkai-makoto-work-kimi-no-na-wa-your-name-art-book.jpg" alt="Nature" style="width:100%;">
  <div class="text-block">
    <h4>Anime Kimi No Nawa</h4>
    <p>Dibuat oleh Makoto Shinkai</p>
  </div>
</div>

</body>
</html>

Membuat Image Text Blocks

Beberapa langkah yang dapat diikuti untuk membuat Image Text Blocks

Langkah 1) Tambahkan HTML:
Contoh

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/21236-shinkai-makoto-work-kimi-no-na-wa-your-name-art-book.jpg" alt="Nature" style="width:100%;">
  <div class="text-block">
    <h4>Anime Kimi No Nawa</h4>
    <p>Dibuat oleh Makoto Shinkai</p>
  </div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/* Container yang menampung gambar dan teks */
.container {
  position: relative;
}

/* Teks kanan bawah */
.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}