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 ).

Berlangganan update artikel terbaru via email:

33 Responses to "Membuat Image Conten Overlay"

  1. saya malah liatin foto ceweknya pak Joen wkwkwkwk
    :D

    ReplyDelete
    Replies
    1. wkkwkkwk... gimana cantik kan...???

      Delete
    2. bukan cantik lagi pak, wow banget hahaha :D
      moga isteri saya nanti wajahnya secantik gitu, tapi tak lupa sholehah nya wkwkwk (malah curhat) :D

      Delete
    3. amiin mas intan semoga aja ya cantik luar dalam...

      Delete
    4. itu ceweknya udah kawin blum yah mas...hehehehe btw keren efek overlaynya mas Jun

      Delete
  2. Mantab gan ilmunya ijin comot ya buat di praktekin.

    ReplyDelete
  3. Mantap mas.. jgn lupa kunjungan baliknya :)

    ReplyDelete
  4. Replies
    1. saha nya..... teu apal kang nang pangih di kebon enteh

      Delete
    2. Owh anu mipit nteh nyah .. lain garelis atuh nya nu ngala nteh teh kang ..

      Delete
  5. Replies
    1. eta soca kang ruly mani molotot kitu ningali nu mencrang mah

      Delete
    2. Mirip sareng pun bojo kang hahahaha

      Delete
  6. visit my site: Free Download MP3 and Free Music Download

    ReplyDelete
  7. wah aq baru liat ni mas.., Keren! :)

    ReplyDelete
    Replies
    1. Lihat Tutornya apa gambar cewenya nih, hehhehe

      Delete
  8. Tapi jadinya terlalu banyak CSS, hehehe

    ReplyDelete
  9. Wah mantab dan gaul mas,,kereeen btw templatenya juga cantik nih mas OK banget

    ReplyDelete
  10. css nya sangat simpel, tapi hasil nya ruaaar biasa...

    ReplyDelete
    Replies
    1. malah mas taupik bisa aja, terimaksih kunjungannya

      Delete
  11. keren banget mas tutorialnya apalagi demonya jadi betah liatnya hehe...

    ReplyDelete
  12. Wahh keren tutornya mas,bermanfaat sekali bagi saya yang newbie ini. Makasih ya, jangan lupa mampir ke blog butut saya.

    ReplyDelete
  13. bisa juga ini mas, tapi saya coba kok gak jadi jadi kenapa yah?
    baiklah saya coba lagi
    terima kasih tutorialnya

    ReplyDelete
  14. Image conten overlay sama modelnya sangat keren gan jd smangat belajar scriptnya :)

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel