CodePen

HTML

            
              <!--jquery overlay-->
<div class="gallerycontent">
<div class="reference">
           	<ul class="image_gallery">
               <li><a id="activator-bureau" class="activator"><img src="http://blogs.miaminewtimes.com/crossfade/StephenMarleyNineMileFestival.jpg" alt="buro" /></a></li>
              <li><a id="activator-werkwijze" class="activator"><img src="http://blogs.miaminewtimes.com/crossfade/StephenMarleyNineMileFestival.jpg" alt="" /></a></li>
              <li><a id="activator-klanten" class="activator"><img src="http://blogs.miaminewtimes.com/crossfade/StephenMarleyNineMileFestival.jpg" alt="" /></a></li>
              <li><a id="activator-contact" class="activator"><img src="http://blogs.miaminewtimes.com/crossfade/StephenMarleyNineMileFestival.jpg" alt="" /></a></li>
</ul>                              
</div>                          
       <!--jquery overlay content box-->                                               
              <div id="activator-werkwijze-overlay" class="overlay"></div>
              <div id="activator-bureau-overlay" class="overlay"></div>
              <div id="activator-klanten-overlay" class="overlay"></div>
              <div id="activator-contact-overlay" class="overlay"></div>

            <div class="box" id="activator-bureau-box">
	          <a class="boxclose" id="boxclose-bureau">x</a>
            <div class="slidewrap">texxt.</div> 
            </div>

            <div class="box" id="activator-werkwijze-box">
	          <a class="boxclose" id="boxclose-werkwijze">x</a>
            <div class="slidewrap">texxt</div>
            </div>

            <div class="box" id="activator-klanten-box">
          	<a class="boxclose" id="boxclose-klanten">x</a>
	          <div class="slidewrap">texxt .</div>          
            </div>

            <div class="box" id="activator-contact-box">
	          <a class="boxclose" id="boxclose-contact">x</a>
	          <div class="slidewrap">texxt QWTRQTRQT.</div>          
            </div>
</div>
            
          
!
via HTML Inspector

CSS

            
              .gallerycontent{ 
width: 800px;
height:800px;
border:solid #FF0000 3px;
position: relative; 
}
.image_gallery li {
display: inline;
list-style: none;
width: 200px;
height: 200px;
float: left;
margin: 4px 4px 4px 4px;
border:solid #FF0000 3px;}


.box{
    background-color:#000; 
    opacity:0.4;
    filter:alpha(opacity=40);
    color:#fff; 
    left: 0;
    margin-left: 0;
    min-height: 450px;
    position:absolute; 
    bottom:px; 
    width: 100%;
    z-index: 101;
}

a.activator {
    cursor: pointer;
}

a:hover{color:#3cc;}

a.boxclose {
    border: 0 solid #FFFFFF;
    cursor: pointer;
    float: right;
    height: 36px;
    margin-right: 0;
    margin-top: 0;
    width: 36px;
}

.slidewrap{padding:20px;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('.reference a').click(function(){
    //get ID of clicked button and appends -box to it so it matches the box id
	var boxId= $(this).attr('ID')+"-box";
    //get ID of clicked button and appends -overlay to it so it matches the overlay id
    var overlayId= $(this).attr('ID')+"-overlay";
    
    //animates all items with box class to -600px and fades out all items with overlay class
    $('.box').animate({'bottom':'-600px'},function(){
      			//closes all items with overlay class
                $('.overlay').fadeOut('fast');
            });
    
    //tells the current overlay to fade in
    $('#'+overlayId).fadeIn('fast',function(){
        		//animates current box bottom position to 0
               $('#'+boxId).animate({'bottom':'0px'});
            });

});

//tells all items with boxclose class to animate its parents bottom to -600
$('.boxclose').click(function(){
    $(this).parent().animate({'bottom':'-600px'});
})

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................