Home » CSS » Styling Image di CSS: Cara Membuat dan Merapikannya

Styling Image di CSS: Cara Membuat dan Merapikannya

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

Rounded Image

Gunakan properti border-radius untuk membuat gambar bulat

Contoh 1 :

<!DOCTYPE html>
<html>
<head>
<style>
img {
  border-radius: 8px;
}
</style>
</head>
<body>

<h2>Rounded Images</h2>
<p> Gunakan properti border-radius untuk membuat gambar bulat: </p>

<img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="Anime" width="300" height="300">

</body>
</html>

Contoh 2:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Rounded Images</h2>
<p> Gunakan properti radius-batas untuk membuat gambar yang dilingkari: </p>

<img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="Anime" width="300" height="300">

</body>
</html>

Gambar Miniatur

Gunakan properti border untuk membuat gambar mini.

Contoh 1:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
</style>
</head>
<body>

<h2>Thumbnail Images</h2>
<p> Menggunakan properti perbatasan untuk membuat gambar mini: </p>

<img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="Anime" style="width:150px">

</body>
</html>

Contoh 2 :

<!DOCTYPE html>
<html>
<head>
<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>Thumbnail Image as Link</h2>
<p> Gunakan properti perbatasan untuk membuat gambar mini. Bungkus jangkar di sekitar gambar untuk digunakan sebagai tautan. </p>
<p> Arahkan kursor ke atas gambar dan klik di atasnya untuk melihat efeknya. </p>

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

</body>
</html>

Gambar Responsif

Gambar responsif secara otomatis akan menyesuaikan dengan ukuran layar. Ubah ukuran jendela browser untuk melihat efeknya.

Jika kita ingin gambar diperkecil tetapi tidak pernah memperbesar lebih besar dari ukuran aslinya, tambahkan yang berikut ini:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
img {
  max-width: 100%;
  height: auto;
}
</style>
</head>
<body>

<h2>Responsive Images</h2>
<p> Gambar responsif secara otomatis akan menyesuaikan dengan ukuran layar. </p>
<p> Ubah ukuran jendela browser untuk melihat efeknya: </p>

<img src="https://dosenit.com/wp-content/uploads/2020/10/2608247125.jpg" alt="Cinque Terre" width="1000" height="300">

</body>
</html>

Pusatkan Gambar

Untuk menengahkan gambar, setel margin kiri dan kanan ke auto dan buatlah elemen tersebut jadi blok:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>

<h2>Center an Image</h2>
<p> Untuk menengahkan gambar, setel margin kiri dan kanan ke otomatis, dan jadikan itu menjadi elemen blok. </p>

<img src="https://dosenit.com/wp-content/uploads/2020/10/2608247125.jpg" alt="Paris" style="width:50%">

</body>
</html>

Polaroid Images / Cards

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:25px;}

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.container {
  text-align: center;
  padding: 10px 20px;
}
</style>
</head>
<body>

<h2>Responsive Polaroid Images / Cards</h2>

<div class="polaroid">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="anime" style="width:100%">
  <div class="container">
  <p>Kimi No Nawa</p>
  </div>
</div>

<div class="polaroid">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/36f88c4d3791007c61af1a2132671d0f.jpg" alt="Anime" style="width:100%">
  <div class="container">
  <p>Oregairu</p>
  </div>
</div>

</body>
</html>

Gambar Transparan

Properti opacity dapat mengambil nilai dari 0,0 – 1,0. Nilai yang lebih rendah semakin transparan:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p> Properti opacity menentukan transparansi suatu elemen. Semakin rendah nilainya, semakin transparan: </p>

<p>Image with 50% opacity:</p>
<img src="https://dosenit.com/wp-content/uploads/2020/10/ilustrasi-hutan_1.jpg" alt="Forest" width="170" height="100">

</body>
</html>

Teks Gambar

Cara memposisikan teks pada gambar adalah sebagai berikut :

Top Left

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>text...:</p>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topleft">Kimi No Nawa</div>
</div>

</body>
</html>

Top Right

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>text...:</p>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topright">Kimi No Nawa</div>
</div>

</body>
</html>

Bottom Left

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.bottomleft {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>text...:</p>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="bottomleft">Kimi No Nawa</div>
</div>
  
</body>
</html>

Bottom Right

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>text...:</p>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="bottomright">Kimi No Nawa</div>
</div>

</body>
</html>

Centered

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>text...:</p>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="center">Kimi No Nawa</div>
</div>

</body>
</html>

Filter Gambar

Properti filter CSS menambahkan efek visual (seperti blur dan saturasi) ke sebuah elemen.

Catatan: Properti filter tidak didukung di Internet Explorer atau Edge 12.

Contoh
Ubah warna semua gambar menjadi hitam dan putih (100% abu-abu):

img {
  filter: grayscale(100%);
}
<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 33%;
  height: auto;
  float: left; 
  max-width: 235px;
}

.blur {filter: blur(4px);}
.brightness {filter: brightness(250%);}
.contrast {filter: contrast(180%);}
.grayscale {filter: grayscale(100%);}
.huerotate {filter: hue-rotate(180deg);}
.invert {filter: invert(100%);}
.opacity {filter: opacity(50%);}
.saturate {filter: saturate(7);}
.sepia {filter: sepia(100%);}
.shadow {filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>

<p><strong>Note:</strong> The filter property is not supported in Internet Explorer or Edge 12.</p>

<img src="https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg" alt="Pineapple" width="300" height="300">

</body>
</html>

Image Hover Overlay

Buat efek overlay saat hover:

Fade in text

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Fade in Overlay</h2>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Detective Conan</div>
  </div>
</div>

</body>
</html>

Fade in a box

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
</style>
</head>
<body>

<h2>Fade in a Box</h2>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="Avatar" class="image" style="width:100%">
  <div class="middle">
    <div class="text">Shinichi Kudoe</div>
  </div>
</div>
  
</body>
</html>

Slide in(top)

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Slide in Overlay from the Top</h2>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Shinichi Kudou vs Conan</div>
  </div>
</div>
 
</body>
</html>

Slide in(bottom)

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Slide in Overlay from the Bottom</h2>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Detective Conan VS Shinichi Kudou</div>
  </div>
</div>

</body>
</html>

Slide in(left)

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay {
  width: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Slide in Overlay from the Left</h2>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Conan VS Kudou</div>
  </div>
</div>

</body>
</html>

Slide in(right)

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay {
  width: 100%;
  left: 0;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Slide in Overlay from the Right</h2>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Conan Vs Kudou</div>
  </div>
</div>

</body>
</html>

Flip an Image

Arahkan mouse ke atas gambar:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
  transform: scaleX(-1);
}
</style>
</head>
<body>

<h2>Flip an Image</h2>
<p>Move your mouse over the image.</p>

<img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="Anime" width="400" height="300">

</body>
</html>

Galeri Gambar Responsif

CSS dapat digunakan untuk membuat galeri gambar pada web. Contoh di bawah ini menggunakan kueri media untuk mengatur ulang gambar pada ukuran layar yang berbeda. Ubah ukuran jendela browser untuk melihat efeknya:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="Conan" width="600" height="400">
    </a>
    <div class="desc">Deskripsi GAmbar : Detective Conan</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://dosenit.com/wp-content/uploads/2020/10/5562a17a0423bd89748b456b.jpeg">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/5562a17a0423bd89748b456b.jpeg" alt="Film" width="600" height="400">
    </a>
    <div class="desc">Deskripsi Gambar : Iron Man</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://dosenit.com/wp-content/uploads/2020/10/259631.jpg">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/259631.jpg" alt="SAO" width="600" height="400">
    </a>
    <div class="desc">Deskripsi Gambar : Sword Art Online</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://dosenit.com/wp-content/uploads/2020/10/curious-george-11960-1680x1050-1.jpg">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/curious-george-11960-1680x1050-1.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Deskripsi Gambar : Curious George</div>
  </div>
</div>

<div class="clearfix"></div>

<div style="padding:6px;">
 <p> Contoh ini menggunakan kueri media untuk mengatur ulang gambar pada ukuran layar yang berbeda: untuk layar yang lebih besar dari 700px, ini akan menampilkan empat gambar secara berdampingan, untuk layar yang lebih kecil dari 700px, ini akan menampilkan dua gambar secara berdampingan. Untuk layar yang lebih kecil dari 500px, gambar akan ditumpuk secara vertikal (100%). </p>
   
</div>

</body>
</html>

Image Modal (Advanced)

Ini adalah contoh untuk mendemonstrasikan bagaimana CSS dan JavaScript dapat bekerja sama.

Berikut Langkah-langkahnya :

  • Pertama, gunakan CSS untuk membuat jendela modal (kotak dialog) dan sembunyikan secara default.
  • Kemudian, gunakan JavaScript untuk menampilkan jendela modal dan untuk menampilkan gambar di dalam modal saat pengguna mengklik gambar:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform: scale(0.1)} 
  to {transform: scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>
</head>
<body>

<h2>Image Modal</h2>
<p> Dalam contoh ini, kami menggunakan CSS untuk membuat modal (kotak dialog) yang disembunyikan secara default. </p>
<p> Kami menggunakan JavaScript untuk memicu modal dan untuk menampilkan gambar saat ini di dalam modal ketika diklik. Perhatikan juga bahwa kami menggunakan nilai dari atribut "alt" gambar sebagai teks keterangan gambar di dalam modal. </p>
<p> Jangan khawatir jika Anda tidak langsung memahami kodenya. Saat Anda selesai dengan CSS, buka Tutorial JavaScript kami untuk mempelajari lebih lanjut. </p>

<img id="myImg" src="https://dosenit.com/wp-content/uploads/2020/10/curious-george-11960-1680x1050-1.jpg" alt="Curious George" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}
</script>

</body>
</html>

You may also like

Padding: Pengertian, Fungsi dan Sintaks

Cara Membuat Fullscreen Video

5 Framework CSS Terbaik Untuk Design WebsiteMu!

Ini Dia Tutorial CSS Flexbox Untuk Pemula (Beserta...

Memulai Mengembangkan Web: Pengenalan Singkat CSS

CSS + HTML: Cara membuat Gallery dengan Filter

Cara membuat Form di atas gambar dengan CSS...

Cara membuat Caption pada gambar dengan CSS +...

Cara membuat Zoom Product Image dengan CSS +...

Cara membuat Image Overlay Slide dengan CSS +...