Membuat Image Conten Overlay

INFO

Kau Selalu Dihatiku

Rasanya baru kemarin kita bersatu
Berjanji seia sekata di depan penghulu
Kaupun tertunduk malu tanda setuju
Mereka pun yang hadir ikut berseru.

Maafkan aku bila belum membahagiakanmu Maafkan aku bila belum menunaikan janjiku Namun percayalah, kebahagiaan itu sederhana Sangat sederhana, asalkan kita mau menerima.

Image Conten Overlay - Mengandung arti kurang lebih sebuah gambar yang memiliki penjelasan atau deskripsi namun konten dari deskripsi tersebut dibuat secara tersembunyi dan barulah ketika sebuah kursor diarahkan ke gambar tersebut akan terbuka deskripsi atau penjelasannya.

Nah Kali ini J-PB setelah sekian lama tidah menulis artikel tentang tutorial maka pada kesempatan ini ane akan menyajikan kepada sobat blogger tentang cara Membuat Image Conten Overlay hanya dengan CSS dan HTML, untuk lebih jelasnya silakan disimak, dan untuk demo dari tutorial ini silaka dilihat pada gambar di atas dan arahkan pointer sobat pada tulisan "INFO" yang ada pada gambar diatas.

UNTUK KODE HTML NYA


<div class="contentnya">
  <div class="overlaynya"></div>
  <div class="corner-overlay-content">INFO</div>
  <div class="overlay-content">
    <h2>Judul Kalimat</h2>
    <p>Isi Kalimat</p>
  </div>
</div>

UNTUK KODE CSS NYA


p {
  margin: 0;
  padding: 0;
}
.contentnya{
  background: url(http://2.bp.blogspot.com/-4iHait6IwyU/UX3TbhB_eiI/AAAAAAAAGFk/dVEmWb8iZWE/s400/Cewek+Cantik+Berjilbab2.jpg);
  border : 2px solid #333;
  height: 350px;/* Tinggi gambar dan konten */
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  width: 350px;/* kebar gambar dan konten */
}
.contentnya .overlaynya {
  border-bottom: 100px solid #e8c63d;
  border-left: 100px solid transparent;
  bottom: 0;
  height: 0;
  opacity: .95;
  position: absolute;
  right: 0;
  text-indent: -9999px;
  transition: all 0.5s ease-out;
  width: 0;
}
.contentnya:hover .overlaynya {
  border-bottom: 800px solid #e8c63d;
  border-left: 800px solid transparent;
  transition: all 0.5s ease-out;
}
.contentnya .corner-overlay-content {
  bottom: 15px;
  color: #333;
  position: absolute;
  right: 15px;
  transition: all 0.5s ease-out;
}
.contentnya:hover .corner-overlay-content {
  opacity: 0;
  transition: all 0.5s ease-out;
}
.contentnya .overlay-content {
  bottom: 0;
  color: #333;
  left: 0;
  opacity: 0;
  padding: 30px;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.3s ease-out;
}
.contentnya .overlay-content h2 {
  border-bottom: 1px solid #333;
  padding: 0 0 12px;
}
.contentnya:hover .overlay-content {
  opacity: 1;
  transition: all 0.3s ease-out;
  transition-delay: 0.3s;
}

Untuk url gambar :

( Silakan disesuaikan dengan gambar sobat ).