Membuat efek image overlay di blog

Hay sahabat" BIE yang baik hati nya,.. apa kabar kalian semua :) sudah lama banget kita tidak sharing sama kalian, ya biasa lah admin lagi sibuk di dunia nyata,.. wkwkwkk
Ok selanjutnya di tutorial kali ini adalah membuat efek image keren yaitu Overlay seperti ketika kita mengklik photo di Facebook. pasti udah pada tau kan apa itu facebook,. kalo masih gak tau mending ke laut ajah sono :D ckckcckk
Efek animasi website ini biasa disebut Image Overlay (efek gambar melayang).

Overlay adalah suatu keadaan yang membuat elemen / object menjadi terfokus yang menyebabkan object di sekitarnya menjadi tidak aktif sampai overlay-nya ditutup. Ibarat sebuah lapisan, maka overlay adalah lapisan pada tumpukan paling atas.
Pada contoh kali ini saya akan menerapkan efek animasi overlay ini pada gallery foto sebuah website dimana ketika kita klik salah satu foto maka foto tersebut akan membesar dan ditampilkan secara apik sebagai foto yang paling depan lebih jelas nya sobat bisa langsung demo nya.

LIVE DEMO

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

/* style untuk id photos */
    #photos {
      text-align:center;
    }

    #photos img {
     cursor:pointer;
     margin:0 5px;
     background-color:#fff;
     border:1px solid #ccc;
     padding:2px;
     -moz-border-radius:4px;
     -webkit-border-radius:4px;
    }

    /* style untuk elemen didalam overlay */
    .details {
      position:absolute;
       top:1px;
      right:15px;
      font-size:11px;
      color:#fff;
      width:190px;
    }

    .details h3 {
      color:#aba;
      font-size:15px;
    }


/* the overlayed element */
.simple_overlay { 
 /* must be initially hidden */
 display:none;
 
 /* place overlay on top of other elements */
 z-index:10000;
 
 /* styling */
 background-color:#333;
 
 width:500px; 
 min-height:200px;
 border:1px solid #666;
 
 /* CSS3 styling for latest browsers */
 -moz-box-shadow:0 0 90px 5px #000;
 -webkit-box-shadow: 0 0 90px #000; 
}

/* close button positioned on upper right corner */
.simple_overlay .close {
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ1RSCJM2BPDkosHx4m-j7zwoaiPf4-augq8sZLJeqMh8Z8Y7zDwOqHM2XHnvG-YNoFdmKCtztL0h04BdNY8qG9LSiKXqfrOrOlOXQp7cizWu6sBd9-soNAXUAY8vH4K2g3ka52bpQmNkm/s1600/close.pn);
 position:absolute;
 right:-15px;
 top:-15px;
 cursor:pointer;
 height:35px;
 width:35px;
}

 /* end overlay styling */

body {
 padding:150px 50px;
 font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}

/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
}

:focus {
  -moz-outline-style:none;
}

5. Tekan Ctrl+F cari kode </head> Lalu masukan script di bawah ini tepat di atas kode </head>

<script type="text/javascript" src="https://sites.google.com/site/vanzdy/script/jquery.tools.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$("img[rel]").overlay();
});
</script>

Penerapannya:

Masukan kode HTML di bawah ini ke dalam postingan blog sobat atau bisa juga di dalam gadget HTML/Javascript

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd369oP8K1hJPKOoRtRjaXp4IwxYnT2HH3ycDZnwVNC5M5jwPOVjeKqfZ0c0sDwzk5IkOdVj0Y1sBYweoDlkWpMWIXL06fCq0vWcjVuezrKRMdv1Ew8d5e7BLGbu0dvJP4BjhJdNR8FEdJ/s1600/film-mika-small.jpg" width="100" height="119" rel="#mies1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaPobm8hgGBbBdp6JdUcxD53v7yHI0NVK6XbUuNNS8pNyMZyrboXCyly2K2er00UZ3NxPZbb_c5PRteY0_UVlGHq3n_93LGPcn16WWUsKSEFUgvZS-MMojyX-GvfHpa_nwdIfZi_vviZzg/s1600/film-pupus-small.jpg" width="100" height="119" rel="#mies2">
         <!-- overlays -->
<div class="simple_overlay" id="mies1"><div class="close"></div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiey03DIntduloLHUBjo3LT0HZMZWvKhh4ABAoZi6XQ7rLb-dgbeVdaYC2699epSTX7-UFgHkAXHM_CKQD3r_IVwoHxGkpRgz6AjxlMdlsHFlJ4FXYai9YlkeTiRyyWtybQcCikvqS9wWJd/s1600/film-mika.jpg">

    <div class="details">
      <h3>MIKA</h3>
      <p>Mika adalah film drama dari Indonesia yang dirilis pada 17 Januari 2013 yang disutradarai oleh Lasja Fauzia Susatyo dan dibintangi oleh Vino G. Bastian dan Velove Vexia.</p> 
        <p>Film ini adalah adaptasi dari novel Waktu Aku Sama Mika yang ditulis oleh Indi. Pada 30 April 2013 film ini diputar di IFF Melbourne Australia.</p>
  <p>sinopsis ini hanya untuk latihan tutorial JQuery - overlay image di Blog Irvan Efendy</p>
      </div>
    </div>

<div class="simple_overlay" id="mies2"><div class="close"></div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicHZRRSTvUBapZ-Vhx8aLaTBl4GuojrlUQwzKV2eyykcnf4ZLv2i-hQoudw28lMVBx6FOIppNi0GCH4ndb0ghchftkOA0ZtblyDlEcRp7iUCEYCf0uWt1P_Scbdi3RsXpWGPNU_G0EepN5/s1600/film-pupus.jpg">
   
    <div class="details">
      <h3>PUPUS</h3>
      <p>Pupus adalah film drama Indonesia yang dirilis pada 26 Mei 2011 dengan disutradarai oleh Rizal Mantovani yang dibintangi oleh Donita dan Marcel Chandrawinata.</p> 
        <p>Dalam Novel ini berkisah tentang pergulatan Cindy, gadis daerah yang kuliah di Jakarta. Mencoba mandiri di tengah ketakutan sang ibu bahwa Cindy akan ditipu laki-laki. Adalah Panji, lelaki yang berulang tahun di hari yang sama dengan Cindy.</p>
  <p>sinopsis ini hanya untuk latihan tutorial JQuery - overlay image di Blog Irvan Efendy</p> 
      </div>
    </div>

Note: Untuk link gambar nya bisa sobat ubah sesuai dengan URL gambar ke sukaan sobat,..
selamat mencoba dan semoga berhasil,...

Jangan lupa di follow ya blog saya :)

Membuat efek image overlay di blog 2014-07-11T12:37:00-07:00 Rating: 4.5 Diposkan Oleh: Unknown