cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!--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>
            
          
!
            
              .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;}
            
          
!
            
              $('.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'});
})

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console