Wie funktioniert dieser Effekt (inside)

[Sebastian]

Hallo liebe Kollegen,

Link: http://wow-en.curse-gaming.com/files/details/111/scrollingcombattext/

Auf der verlinkten Seite gibt es im unteren Bereich Screenshots. Wenn man diese anklickt öffnet sich der vergrösserte Screenshot und der Hintergrund der Seite wird dunkler. Dazu habe ich in den CSS Dateien rumgesucht und bin auch folgende Stile gestoßen:

#kBox {
 position: absolute;
 background: #ffffff;
 z-index: 102;
 color:#000000;
 display:none;
 border: 4px solid #525252;
 text-align:left;
}

#kBoxIFrame {
 border: none;
 z-index:101;
 top: 0px;
 left: 0px;
 background-color:#000;
 filter:alpha(opacity=0);
 -moz-opacity: 0.0;
 opacity: 0.0;
 margin: 0px;
 width: 100%;
 height: 100%;
}

#kBox_content {
 overflow: hide;
 background-color:#EBEBEB;
}

#kBox_header a{
 text-decoration: none;
}

#kBox_header > * {
 font-size:9pt;
 line-height:20px;
 font-family:"Trebuchet MS",Verdana,sans-serif;
 color:#fff;
 margin: 0px 5px;
}

#kBox_caption {
 float:left;

}

#kBox_header {
 top: 0px;
 left: 0px;
 z-index:103;
 width: 100%;
 height: 20px;
 background:#282828 url(http://static.curse-gaming.com/images/content/fbox-header.gif) repeat-x scroll left top;
 text-align: right;
}

#kBox_overlay {
 position: absolute;
 z-index:100;
 top: 0px;
 left: 0px;
 background-color:#000;
 filter:alpha(opacity=60);
 -moz-opacity: 0.6;
 opacity: 0.6;
 display: none;
}

#kBox_load {
 position: absolute;
 display:none;
 height:100px;
 width:100px;
 z-index:101;
}

Die Links der Screenshots sehen allerdings sehr einfach aus:

<a <href="http://media5.curse-gaming.com/images/previews/14587/sctexamples.jpg" rel="imageview"><img alt="SCT Examples" src="http://media5.curse-gaming.com/images/thumbnails/14587/sctexamples.jpg"></a>

Da ich in diesem Bereich noch unerfahren bin, würde ich mich über eine Hilfestellung freuen, diesen Effekt selber zu erzeugen.