CodePen

HTML

            
              <ul>

  <li class="content">
    	<img src="http://schwarttzy.com/wp-content/uploads/2012/10/kaboom.jpg" />
    </li>
    
	<li class="contnt"></li>
    
</ul>
            
          
!

CSS

            
              html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, img, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {background: transparent;border: 0;font-size: 100%;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
html {min-height:100%;height: 100%; min-width:100%; width: 100%;}
blockquote, q {quotes:none;}
:focus {outline:0;}
ins {text-decoration:none;}
del {text-decoration:line-through;}
table {border-collapse:collapse;border-spacing:0;}

body {
  height:100%;
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #42413C;
	margin: 0;
	padding: 0;
	color: #000;
	width:100%;}

li {display:inline-block; float:right; clear:both;}

ul {
	max-width:50%;
	height:3000px;
	background-color: #063;
	margin: 0 auto;
	overflow:visible;}

.content {
	background:#09F;5
	padding:10% 0;
	width:50%;
	z-index:100;}
	
.content img {
	height:auto;
	padding:10% 0;
	width:200%;}

.contnt {
	background:#939;
	height:50%;
	width:50%;}
            
          
!

JavaScript

            
              
            
          
!
999px
Loading ..................