Cara Membuat Overlays pada Gambar Pure Menggunakan HTML CSS Sederhana

Cara membuat overlay pada gambar pure menggunakan html, css dengan sederhana. Overlays menurut admin adalah hamparan yang muncul ketika tombol diklik atau sebuah area yang dilewati oleh krusor. Overlay adalah termasuk ke dalam bumbu-bumbu design untuk mempercantik sebuah design website.

Kali ini saya akan mengulas sedikit tentang overlay secara sederhana, kode yang saya gunakan kali ini masih sama seperti ulasan sebelumnya. Jika teman - teman belum mempunya kodenya coba cek ulasan saya sebelumnya .

Kasus kali ini saya ingin memberikan efek overlay pada gambar utama di website. Jadi nanti hasil akhirnya adalah ketika krusor mouse berada pada area yang saya berikan fungsi efek overlays maka efek tersebut akan menampilkan hamparan baru namun tidak sepenuhnya menutupi gambar.

Pertama yang kita perlukan adalah kode html untuk menampilkan gambar. berikut kode htmlnya

<div class="image-overlay">
<div class="overlay">
       <div class="box">
    <h2>Ga Punya Kode</h2>
       </div>
</div>
<a href="https://www.blog.blogspot.com">
<img src="url gambar" alt=" " >
</a>
</div>

Itulah kode yang kita butuhkan pertama kali, oiya saya menggunakan software editor Sublime Tex lumayan simpel dan ringan sob. Teman - teman bisa coba software editor tersebut jika belum menginstall.

Kedua kita juga tentu membutuhkan css untuk mengatur tampilan gambar. Karena ada fungsi baru maka ada sedikit perubahan dalam coding css nya. Mari kita cek di bawah ini

.image-overlay img {
  width: 100%;
  height: 250px;
  border-radius: 10px;
}

Sedikit berbeda kan sob, saya berikan class sebelum img karena posisi fungsi img berada dalam class image-overlay. coding sebelumnya saya menuliskan fungsi css hanya img .

Ketiga kita juga membutuhkan kode baru baru untuk efek overlays tersebut. berikut kode css yang kita butuhkan

.image-overlay {
  position: relative;
  overflow: hidden;
  text-align: center;
  width: 20%;
  line-height: 120px;
  height: 120px;
  background: #103B51;
  border-radius: 10px;
  box-shadow: 0 5px 1px #f9f9f9;
  cursor:pointer;
}
.image-overlay:hover .overlay{
    opacity: 0.5;
  }
.overlay{
  position: absolute;
  border-radius: 10px;
  opacity: 0;
  background: #f9f9f9;
  @include transition (opacity .5s ease-in-out);
}

.box {
  font-size: 20px;
  font-weight: 200;
  color: black;
  padding: 0;
  width: 1246px;
  height: 225px;
  text-align: center;
  margin-left: 0px;
}

Yang terkahir jika teman - teman telah berhasil menuliskan kode seluruhnya secara runtut semoga hasilnya langsung bisa diliat. berikut hasilnya jika kita telah berhasil

Tampilannya akan menjadi seperti di atas jika kita mengarahkan krusor mouse ke area gambar. Jika kita mengarahkan krusor pada area gambar maka tampilan hamparan akan hilang. Berikut gambarnya

Demikian ulasan saya tentang Cara Membuat Overlays pada Gambar Pure Menggunakan HTML CSS Sederhana. Semoga jadi manfaat bagi teman - teman. Salam blogger dari desa. Terima Kasih

Share this post