CodePen

HTML

            
              <div class="drawingslineone">
  <img src="http://tmacfitness.com/wp-content/uploads/2013/04/Beauty-of-nature-random-4884759-1280-800.jpg" id="ten"/>
	 <img src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg" id="two" />
	 <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSjeIT7HEdRO1K0Pz0zPxsaqcPAYaFtS_RlJamFIQZ653-ZA0M6MA" id="three"/>
  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQyeyArifDvs0ibCsK3janWbFTZ4fAV6M4Gg_MCRDBw89eteVym" id="four"/>
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSvjjtHN6ej8C0Tkv7DSfFjR3d_P00hg7H6R2sU371njC8XyOad" id="five"/>
  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSfAoOGRF9XZsHYmCXyuhNhLaTeZmDniGVbM8oRDfMgn5dNxUFsRw" id="six"/>
	 <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTvgRR42S43InasLlAoi1K2ohfbeMluMzIqdpAhQaB5XpWy-HuNmg" id="seven"/>
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTZnTbXEgEglEXkTJbxSMBUMu_7qtKGte8MRyKKoe1Hjv_QNTlqHg" id="eight"/>
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTI9S-qApTKfa8MYzm83KVtmHG5D9yX7Qht9cIK7la9kglwXEMJHQ" id="nine"/>
	 <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTPxmktDkHShrNxgpTIDnslmw5gUhc4_F2eibFLfpqByY69v4co" id="one" onclick="popup('popUpDiv')"/>
  </div>
  
     <div id="blanket" style="display:none;"></div>
	 <div id="popUpDiv" style="display:none;">
	 <a href="#" onclick="popup('popUpDiv')" id="closebox">X</a></div>
   
            
          
!
via HTML Inspector

CSS

            
              body
   {
	 overflow:hidden;
   }
   img
   {
   width:130px;
	 height:130px;
	 background-color:transparent;
	 float:left;
	 margin-left:0px;
	 margin-top:0px;
	 border:solid 3px white;
	 cursor:pointer;
	 -webkit-transition: height .50s,width .50s;
   }
   #ten
   {
     -webkit-animation: slidedown 1s;
	 -webkit-animation-fill-mode:forwards;
	 -webkit-animation-delay:.90s;
	 position:absolute;top:-200px;left:604px;
	 z-index:99;
   }
   @-webkit-keyframes slidedown
   {
     100%{top:182px;}
   }
   
   #nine
   {
     -webkit-animation: slidedown 1s;
	 -webkit-animation-fill-mode:forwards;
	 -webkit-animation-delay:.80s;
	 position:absolute;top:-200px;left:455px;
	 z-index;99;
   }
   @-webkit-keyframes slidedown
   {
     100%{top:182px;}
   }
   
   #eight
   {
     -webkit-animation: 1s slidedown;
	 -webkit-animation-fill-mode:forwards;
	 -webkit-animation-delay:.70s;
	 position:absolute;top:-200px;left:306px;
	 z-index:99;
   }
   @-webkit-keyframes slidedown
   {
     100%{top:182px;}
   }
   
   #seven
   {
     -webkit-animation: 1s slidedown;
	 -webkit-animation-fill-mode:forwards;
	 -webkit-animation-delay:.60s;
	 position:absolute;top:-200px;left:157px;
	 z-index:99;
   }
   @-webkit-keyframes slidedown
   {
     100%{top:182px;}
   }
   
   #six
   {
     -webkit-animation: 1s slidedown;
	 -webkit-animation-fill-mode:forwards;
	 -webkit-animation-delay:.50s;
	 position:absolute;top:-200px;left:8px;
	 z-index:99;
   }
   @-webkit-keyframes slidedown
   {
     100%{top:182px;}
   }
   #six:hover
   {
     z-index:1000;
   }
   
   #five
   {
     -webkit-animation:1s slidedownone;
	 -webkit-animation-fill-mode:forwards;
	 -webkit-animation-delay:.40s;
	 position:absolute;top:-200px;left:604px;
   }
   @-webkit-keyframes slidedownone
   {
     100%{top:8px;}
   }
   #five:hover
   {
     z-index:1000;
   }
   
   #four
   {
     -webkit-animation:1s slidedownone;
     -webkit-animation-fill-mode:forwards;
	 -webkit-animation-delay:.30s;
	 position:absolute;top:-200px;left:455px;
   }
   @-webkit-keyframes slidedownone
   {
     100%{top:8px;}
   }
   #four:hover
   {
     z-index:1000;
   }
   
   #three
   {
     -webkit-animation:1s slidedownone;
	 -webkit-animation-fill-mode:forwards;
	 -webkit-animation-delay:.20s;
	 position:absolute;top:-200px;left:306px;
   }
   @-webkit-keyframes slidedownone
   {
     100%{top:8px;}
   }
   #three:hover
   {
     z-index:1000;
   }
   
   #two
   {
     -webkit-animation:1s slidedownone;
	 -webkit-animation-fill-mode:forwards;
	 -webkit-animation-delay:.10s;
	 position:absolute;top:-200px;left:157px;
   }
   @-webkit-keyframes slidedownone
   {
     100%{top:8px;}
   }
   #two:hover
   {
     z-index:1000;
   }
   
   #one
   {
     -webkit-animation:1s slidedownone;
	 -webkit-animation-fill-mode:forwards;
	 position:absolute;top:-200px;left:8px;
   }
   @-webkit-keyframes slidedownone
   {
     100%{top:8px;}
   }
   #one:hover
   {
     z-index:1000;
   }
   
/*Pop-up Styling code*/

#blanket 
{
   background-color:#111;
   position:absolute;
   opacity:0.4;
   z-index: 9001;
   top:0px;
   left:0px;
   width:100%;
}
#popUpDiv 
{
	position:absolute;
	background-image:url('http://reallycoolstuff.net/JV/images/drawings/batman.jpg');
	repeat:no-repeat;
	width:408px;
	height:390px;
	border:5px solid white;
	z-index: 9002;
  margin-top:30px;
}
#popUpDiv a 
{
    position:absolute;top:20px;left:15px;
}
#closebox
{
    background-color:white;
	text-align:center;
	border:solid 3px #3c3b39;
	margin-top:10px;
	border-radius:100%;
	width:30px;
	height:30px;
	box-shadow: 0px 5px 5px black;
	font-size:25px;
	text-decoration:none;
	color:white;
	text-shadow:0px 0px 3px black;
	font-weight:bold;
	margin-top:-30px;
	margin-left:-30px;
	background: #c4cfd8; /* Old browsers */
    background: -moz-linear-gradient(top,  #c4cfd8 0%, #9da9b2 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c4cfd8), color-stop(100%,#9da9b2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #c4cfd8 0%,#9da9b2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #c4cfd8 0%,#9da9b2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #c4cfd8 0%,#9da9b2 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #c4cfd8 0%,#9da9b2 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4cfd8', endColorstr='#9da9b2',GradientType=0 ); /* IE6-9 */
	font-family:sans-serif;
}
#closebox:hover
{
   background: #9da9b2; /* Old browsers */
   background: -moz-linear-gradient(top,  #9da9b2 0%, #c4cfd8 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9da9b2), color-stop(100%,#c4cfd8)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top,  #9da9b2 0%,#c4cfd8 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top,  #9da9b2 0%,#c4cfd8 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top,  #9da9b2 0%,#c4cfd8 100%); /* IE10+ */
   background: linear-gradient(to bottom,  #9da9b2 0%,#c4cfd8 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9da9b2', endColorstr='#c4cfd8',GradientType=0 ); /* IE6-9 */
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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