Interesting hover effect - which javascript library/script could accomplish this?

Hi There,

I’ve come across this interesting site - just see what happens when you hover over each image:
http://poptech.org/speakers?utm_source=PopTech+Newsletter+Master+List&utm_campaign=f500864486-Additional+speakers+announced_9.14&utm_medium=email

Could this sort of thing be accomplished fairly easily with an existing javascript library/script? A jquery script would be ideal if such a thing exists.

Thanks,
Dan

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

.pop {
  position:absolute;z-Index:101;visibility:hidden;top:400px;width:200px;height:150px;background-Color:red;padding:5px;
}

.popimg {
  position:relative;top:100px;width:120px;height:160px;border:solid red 1px;float:left;margin-Left:20px;
}

.title {
  position:absolute;left:0px;top:140px;width:120px;height:20px;background-Color:red;text-Align:center;
}

/*]]>*/
</style>
</head>

<body>
 <div id="img1" class="popimg" >
  <img src="http://poptech.org/system/web_images/1140/original/annmarie_ahearn.jpg" />
  <div class="title" >Some Text</div>
 </div>
 <div id="img2" class="popimg" >
  <img src="http://poptech.org/system/web_images/1140/original/annmarie_ahearn.jpg" />
  <div class="title" >Some Text</div>
 </div>
 <div id="img1pop" class="pop" >Some Text</div>
 <div id="img2pop" class="pop" >Some More Text</div>


<script type="text/javascript">
/*<![CDATA[*/

function zxcTitle(o){
 var reg=new RegExp('\\\\b'+o.CommonClass+'\\\\b'),els=document.getElementsByTagName('DIV'),div,z0=0,z1=0,ms=o.Duration,opac=o.Opacity;
 for (; z0<els.length;z0++){
  div=els[z0].getElementsByTagName('DIV')[0];
  if(reg.test(els[z0].className)&&div){
   new zxcTitleOOP(els[z0],div,ms,opac);
  }
 }
}

function zxcTitleOOP(obj,div,ms,opac){
 var oop=this,s=div.offsetTop;
 obj.style.overflow='hidden';
 this.obj=div
 this.mm=[s,obj.offsetHeight];
 this.ms=typeof(ms)=='number'?ms:500;
 this.now=s;
 if (typeof(opac)=='number'){
  div.style.filter='alpha(opacity='+opac+')';
  div.style.opacity=div.style.MozOpacity=div.style.WebkitOpacity=div.style.KhtmlOpacity=opac/100-.001;
 }
 obj.onmouseover=function(){ oop.mse(true); }
 obj.onmouseout=function(){ oop.mse(false); }
}

zxcTitleOOP.prototype={

 mse:function(ud){
  this.animate(this.now,this.mm[ud?1:0],new Date(),this.ms);
 },

 animate:function(s,f,srt,mS){
  var oop=this,op=oop.oop,ms=new Date().getTime()-srt,now=(f-s)/mS*ms+s;
  if (isFinite(now)){
   oop.now=now;
   oop.obj.style.top=now+'px';
  }
  if (ms<mS){
   oop.dly=setTimeout(function(){oop.animate(s,f,srt,mS); },10);
  }
  else {
   oop.now=f;
   oop.obj.style.top=f+'px';
  }
 }

}

function zxcPop(o){
 var reg=new RegExp('\\\\b'+o.CommonClass+'\\\\b'),els=document.getElementsByTagName('DIV'),ary=[],id,div,img,z0=0,z1=0,x=o.XOffset,y=o.YOffset,ms=o.FadeDuration;
 for (; z0<els.length;z0++){
  id=els[z0].id
  if(reg.test(els[z0].className)&&id){
   div=document.getElementById(id+'pop');
   img=els[z0].getElementsByTagName('IMG')[0];
   if (div&&img){
    ary.push(new zxcPopOOP(img,div,x,y,ms));
   }
  }
 }
}

function zxcPopOOP(obj,div,x,y,ms){
 var oop=this;
 this.obj=obj;
 this.pop=div;
 this.x=typeof(x)=='number'?x:obj.offsetWidth+5;
 this.y=typeof(y)=='number'?y:-div.offsetHeight-5;
 this.ms=typeof(ms)=='number'?ms:false;
 this.now=0;
 obj.onmouseover=function(){ oop.mse(true); }
 obj.onmouseout=function(){ oop.mse(false); }
}

zxcPopOOP.prototype={

 mse:function(ud){
  var pos=this.pos(this.obj),pop=this.pop,ms=this.ms;
  pop.style.left=pos[0]+this.x+'px';
  pop.style.top=pos[1]+this.y+'px';
  pop.style.visibility=ms||ud?'visible':'hidden';
  if (ms){
   this.animate(this.now,ud?100:0,new Date(),ms);
  }
 },

 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },

 animate:function(s,f,srt,mS){
  var oop=this,op=oop.oop,ms=new Date().getTime()-srt,now=(f-s)/mS*ms+s,obj=this.pop;
  if (isFinite(now)){
   oop.now=now;
   obj.style.filter='alpha(opacity='+now+')';
   obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
  }
  if (ms<mS){
   oop.dly=setTimeout(function(){oop.animate(s,f,srt,mS); },10);
  }
  else {
   oop.now=f;
   if (f==0){
    obj.style.visibility='hidden';
   }
  }
 }

}


zxcTitle({
 CommonClass:'popimg', // the common class name of the DIVs to apply the effect.   (string)
 Duration:500,         //(optional) the title DIV slide duration in milli seconds. (number, default = 500)
 Opacity:70            //(optional) the opacity of the title DIV.                  (number, default = no opacity)
});

zxcPop({
 CommonClass:'popimg', // the common class name of the DIVs to apply the effect.   (string)
 XOffset:130,          //(optional) x offset of the popup.                         (number, default = left of the DIV)
 YOffset:0,            //(optional) y offset of the popup.                         (number, default = above of the DIV)
 FadeDuration:500      //(optional) the fade duration in milli seconds. (number, default = no fade effect)
});
/*]]>*/
</script>

</body>

</html>

Wow, with some tweaking to the fade times that is perfect. Is this your own work then?

Thanks alot.

The zxc prefix on function names identifies the author as Nicholas Zakas.

The code is mine

Vic Phillips

see the link below