CSS Enlarge Image on Hover

HTML

<div class="row portfolio-images">
      	<ul class="enlarge2">
      		<span><img 						src="http://www.peopleciety.com/wp/wp-content/uploads/2016/03/%EB%B0%94%EB%8B%A4%EC%99%80-%EA%B0%95%EA%B3%BC-%ED%95%98%EB%8A%98%EA%B3%BC-%EC%A7%91%EA%B3%BC-%EA%B5%AC%EB%A6%84%EC%9D%B4-%EC%9E%88%EB%8A%94-%ED%92%8D%EA%B2%BD.jpg"/><br />
                </span>
            <li><img src="http://www.peopleciety.com/wp/wp-content/uploads/2016/03/%EB%B0%94%EB%8B%A4%EC%99%80-%EA%B0%95%EA%B3%BC-%ED%95%98%EB%8A%98%EA%B3%BC-%EC%A7%91%EA%B3%BC-%EA%B5%AC%EB%A6%84%EC%9D%B4-%EC%9E%88%EB%8A%94-%ED%92%8D%EA%B2%BD.jpg" style="width:50px;height:50px;"/></li> 
           
      </ul>
</div>

CSS

ul.enlarge2{
list-style-type:none; /*remove the bullet point*/
margin-left:0;
}
ul.enlarge2 li{
display:inline-block; /*places the images in a line*/
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
}
ul.enlarge2 img{
background-color:#eae9d4;
padding: 6px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
}
.span1{
margin:0 auto;
display:block;
z-index:1;
height:10px;
width:100px;   
padding: 10px;
font-family: 'Droid Sans', sans-serif;
font-size:.9em;
text-align: center; 
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius:8px;
}
ul.enlarge2 span{
position:absolute;
left: -9999px;
background-color:white;
}
ul.enlarge2 li:hover{
z-index: 150;
cursor:pointer;

}
ul.enlarge2 span img{

padding:2px;
background:#ccc;
}
ul.enlarge2 li:hover span{ 
top: 100px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: 0px; /*distance from the left of the thumbnail to the left of the popup image*/
}
ul.enlarge2 li:hover:nth-child(2) span{
left: -200px; 
}
ul.enlarge2 li:hover:nth-child(3) span{
left: -200px; 
}
ul.enlarge2 img, ul.enlarge span{
behavior: url(pie/PIE.htc); 
}