CSS Image Overlay

0
178

Sebelumnya saya telah menulis artikel tutorial CSS Hover Image. Kali ini saya menuliskan tutorial tentang cara membuat image overlay sederhana agar anda bisa memodifikasi sesuai keinginan anda. Sama seperti image hover bisa digunakan untuk membuat tampilan di galeri photo pada website. Mari kita simak tutorialnya.

Siapkan text editor mu dahulu.

Step 1

Tulis program dibawah ini lalu simpan dengan nama file index.html.

<!DOCTYPE html>
<html>
<head>
  <title>CSS Image Overlay</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
      <img src="img.jpg" class="image">
      <div class="overlay overlayleft">
        <div class="text">Left</div>
      </div>
  </div>

  <div class="container">
      <img src="img.jpg" class="image">
      <div class="overlay overlayright">
        <div class="text">Right</div>
      </div>
  </div>

  <div class="container">
      <img src="img.jpg" class="image">
      <div class="overlay overlaytop">
        <div class="text">Top</div>
      </div>
  </div>

  <div class="container">
      <img src="img.jpg" class="image">
      <div class="overlay overlaybottom">
        <div class="text">Bottom</div>
      </div>
  </div>

  <div class="container">
      <img src="img.jpg" class="image">
      <div class="overlay overlaycross">
        <div class="text">Cross</div>
      </div>
  </div>

  <div class="container">
      <img src="img.jpg" class="image">
      <div class="overlay overlayfade">
        <div class="text">Fade</div>
      </div>
  </div>
</body>
</html>

 

Step 2

Tulis program dibawah ini dan simpan dengan nama file style.css lalu simpan difolder css.

.container {
  position: relative;
  width: 200px;
  height: 200px;
  display: inline-block;
}
.image {
  display: block;
  width: 200px;
  height:200px;
}
.overlay  {
  position: absolute;
  transition: all .3s ease;
  opacity: 0;
  background-color: #eee;
}
.text {
  color: #fff;
  font-family: arial;
  font-size: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.overlayleft {
  height: 100%;
  width: 0;
  top: 0;
  left: 0;
}
.overlayright {
  height: 100%;
  width: 0;
  top: 0;
  right: 0;
}
.container:hover .overlay {
  opacity: 1;
}
.container:hover .overlayleft, .container:hover .overlayright {
  width: 100%;
}
.container:hover .overlaytop, .container:hover .overlaybottom {
  height: 100%;
}
.container:hover .overlaycross {
  width: 100%;
  height: 100%;
}
.overlaytop {
  height: 0;
  width: 100%;
  top: 0;
  left: 0;
}
.overlaybottom {
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
}
.overlaycross {
  width: 0;
  height: 0;
  bottom: 0;
  right: 0;
}
.overlayfade {
  width: 100%;
  height: 100%;
  top:0;
  bottom: 0;
}

 

Simpan semua itu di satu folder. Jika kita buka index.html maka nanti tampilannya akan seperti dibawah ini.

Ketika anda mengarahkan mouse ke gambar maka akan muncul bagian baru baru pada gambar. Silahkan mencoba dan jangan lupa ngetik, tidak copas, supaya anda mudah untuk memahaminya.

Terima Kasih telah membaca.

***PIU***

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here