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%;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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