Script DIV Hover Content Overlay Super Keren

Script jQuery untuk obyek gambar dibungkus pada tag div yang muncul setelah mouse diarahkan ke gambar. Orang biasanya menggunakan kode ini diletakkan pada bagian bawah konten atau dekat dengan related post.

Jika ini diterapkan dengan related post/ artikel terkait, maka Anda perlu menambah script khusus untuk menampilkan link terkait berdasarkan label. Anda bisa mencari tutorial ini sendiri di google dan sudah banyak yang posting cara ini.

Instalasi Widget

Simpan Google Apis Ajax
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
HTML
<h3>Demo 1:</h3>
<div id="divTunggal" style="width:250px;border:1px solid gray;padding:15px;background:#eee" data-overlayid="moreinfo">
Desain web adalah istilah yang luas digunakan untuk konten (biasanya hypertext atau hypermedia) yang dikirimkan ke pengguna akhir melalui World Wide Web (www), menggunakan browser web atau perangkat lunak web-enabled lain untuk menampilkan konten.
</div>

<div id="moreinfo">
<b>Web Design Resources:</b><br />
<a href="http://www.kangsigit.com">Tutorial Script</a><br />
<a href="#link1">Teks Link 1</a><br />
<a href="#link2">Teks Link 2</a><br />
<a href="#link3">Teks Link 3</a><br />
</div>

<h3>Demo 2:</h3>
<div class="gambarTransparan" data-overlayid="springinfo" style="display:block-inline;width:200px;height:150px">
<img src="http://4.bp.blogspot.com/-BV_82m-WV3Y/Vn9dCzqH_CI/AAAAAAAADvo/p8lxIwhcZmE/s1600/spring.jpg"/>
</div>

<div class="gambarTransparan" data-overlayid="summerinfo" style="display:block-inline;width:200px;height:150px">
<img src="http://1.bp.blogspot.com/-KxFzy5ADAnA/Vn9dCJNm8tI/AAAAAAAADvg/uRHz7wG3vvs/s1600/summer.jpg"/>
</div>

<div class="gambarTransparan" data-overlayid="winterinfo" style="display:block-inline;width:200px;height:150px">
<img src="http://3.bp.blogspot.com/-VfOifnWQwYw/Vn9dE0R3lCI/AAAAAAAADvw/PxlPZvzdRmI/s1600/winter.jpg"/>
</div>

<div id="springinfo">
<a href="#link4">Teks Link 4</a><br />
<a href="#link5">Teks Link 5</a><br />
<a href="#link6">Teks Link 6</a><br />
<a href="#link7">Teks Link 7</a><br />
</div>

<div id="summerinfo">
<a href="#link8">Teks Link 8</a><br />
<a href="#link9">Teks Link 9</a><br />
<a href="#link10">Teks Link 10</a><br />
<a href="#link11">Teks Link 11</a><br />
</div>

<div id="winterinfo">
<a href="#link12">Teks Link 12</a><br />
<a href="#link13">Teks Link 13</a><br />
<a href="#link14">Teks Link 14</a><br />
<a href="#link15">Teks Link 15</a><br />
</div>
jQuery
/*******
** Get more script: http://www.kangsigit.com **
   *************************************************
*****/
// jQuery Overlay Box start
jQuery.noConflict();

jQuery.extend(jQuery.easing, {easeOutExpo:function (x, t, b, c, d) { //see: http://gsgd.co.uk/sandbox/jquery/easing/
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
}
});

(function($){
  $.fn.overlaycontent=function(options) {
    var setting={id:'', dir:'up', speed:200, opacity:1}
    return this.each(function(){
      $.extend(setting, options, (this.getAttribute('data-overlayid'))? {id:this.getAttribute('data-overlayid')} : {})
var $target=$(this).css({position:'relative', overflow:'hidden'}) //set anchor DIV position to relative
var $overlay=$('#'+(setting.id)) //reference overlay DIV box
var startpoint={}
if (setting.dir=="up" || setting.dir=="down"){ //set initial position of overlay box (either "top" or "left" property affected)
startpoint={top:$target.outerHeight()* (setting.dir=="down"? -1 : 1)}
}
else{
startpoint={left:$target.outerWidth()* (setting.dir=="right"? -1 : 1)}
}
var overlaydimenions={w:$target.outerWidth()-($overlay.outerWidth()-$overlay.width()), h:$target.outerHeight()-($overlay.outerHeight()-$overlay.height())}
$overlay.css($.extend({position:'absolute', zIndex:'1000', width:overlaydimenions.w, height:overlaydimenions.h, left:0, top:0, visibility:'visible'}, startpoint)).appendTo($target)
if (setting.opacity<1)
$overlay.css({opacity:setting.opacity})
$target.hover(
function(){
$overlay.dequeue().animate((setting.dir=="up" || setting.dir=="down")? {top:0} : {left:0}, setting.speed, 'easeOutExpo')
},
function(){
$overlay.dequeue().animate(startpoint, setting.speed)
}
) //end hover
  })
  }
})(jQuery);
// jQuery Overlay Box end

// Setting overlay
jQuery(function($){

$('#divTunggal').overlaycontent({ //memulai overlay untuk DIV tunggal melalui id="divTunggal"
speed:500, //kecepatan animasi dalam milliseconds (0,5 detik)
dir:'up' //Animasi bergerak ke arah 'up'/atas
}) //Tambahan: Anda bisa menggunakan 'up', 'down', 'left', atau 'right'

$('div.gambarTransparan').overlaycontent({ //memulai overlay untuk DIV transparan melalui class="gambarTransparan"
speed:300, //kecepatan animasi dalam milliseconds (0,3 detik)
dir:'right', //Animasi bergerak ke arah 'right'/kanan
opacity:0.8 //opacity gambar
})

})
CSS Style
div#moreinfo{
padding:10px;
background:lightblue url(http://2.bp.blogspot.com/-fpIViDHb75Y/Vn9dApb6z7I/AAAAAAAADvY/HFJN4RXB-1w/s1600/pattern.png);
}

div#springinfo, div#summerinfo, div#winterinfo{
background:white;
padding:5px;
}

URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini