Cara Membuat Thumbnail

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

by Hanifah Nurbaeti January 27, 2021

Di bawah ini kita akan mempalajari cara membuat gambar thumbnail dengan menggunaan HTML dan CSS.

Gambar Thumbnail

Thumbnail adalah gambar kecil yang mewakili gambar yang lebih besar (saat diklik) dan sering kali dikenali dengan bingkai di sekelilingnya:

Cara Membuat Gambar Thumbnail

Gunakan elemen dan bungkus elemen di sekitarnya. Style gambar dengan perbatasan dan tambahkan efek hover:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
</head>
<body>

<h2>Contoh Thumbnail Image</h2>
<p> Klik pada gambar untuk memperbesarnya. </p>

<a target="_blank" href="https://dosenit.com/wp-content/uploads/2020/10/img_chania.jpg">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Forest" style="width:150px">
</a>

</body>
</html>