CodePen

HTML

            
              <body>
<div id="page">
	<div id="splash_container">
		<div id="splash">
			<div id="splash_content_line1">
				<div id="splash_content_line1_align">
					<H1>TEST</H1>
				</div>
			</div>
			<div id="splash_content_line1">
				<div id="splash_content_line2_align">
					<H1>test test test test</H1>
				</div>
			</div>
		</div>
	</div>
	<div id="menu_bottom">
		<div id="menu_option1"><li>One</li></div>		
		<div id="menu_option2"><li>Two</li></div>
		<div id="menu_option3"><li>Three</li></div>
		<div id="menu_option4"><li>Four</li></div>
		<div id="menu_option5"><li>Five</li></div>
		<div id="main_section1"><p>ONE ONE ONE ONE ONE</p></div>		
		<div id="main_section2"><p>TWO TWO TWO TWO TWO</p></div>
		<div id="main_section3"><p>THREE THREE THREE THREE</p></div>
		<div id="main_section4"><p>FOUR FOUR FOUR FOUR FOUR</p></div>
		<div id="main_section5"><p>FIVE FIVE FIVE FIVE FIVE</p></div>

		<div id="main_section_gradient"></div>
	</div>
</div>
</body>
            
          
!
via HTML Inspector

CSS

            
              body { 
	height: 100%;
	background-color: #222;
	background-repeat: repeat;
	-webkit-animation: bugfix infinite 1s; 
	}
	
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

* {
margin:0;
padding:0;
}

#page {
height: 100%;
width: 100%;
display: block;
oveflow: visible;
}

#splash_container {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: absolute;
	-webkit-transform: all;
	-webkit-transition-duration:9999s;
	z-index: 999;
}

#splash {
	height: 100%;
	width: 100%;
	position: absolute;
	-webkit-transform: all;
	-webkit-transition-duration:9999s;
	background-color: #222;
	text-align: center;
    vertical-align:middle;
    display: table-cell;
	overflow: hidden;
	z-index: 999;
}

#splash:hover {
	-webkit-transform: scale(15);
	-webkit-transition-duration:1.5s;
	transition-timing-function: ease-in;
	opacity:0.0;
	z-index: -1;
	overflow: hidden;
}

#splash_container:hover {
	-webkit-transition-duration:1.5s;
	transition-timing-function: ease-in;
	z-index: -1;
}

#splash_content_line1 {
	height: 50%;
	position: relative;
	overflow: hidden;
}

#splash_content_line1_align h1 {
    position:absolute;
    bottom:0;
	text-align: center;
	font-size: 170px;
	color: white;
	font-family:"Calibri Light", Calibri, sans-serif;
	width: 100%;
	overflow: hidden;
}


#splash_content_line2 {
	height: 50%;
	position: relative;
	overflow: hidden;
}

#splash_content_line2_align h1 {
    position:absolute;
    top:0;
	text-align: center;
	font-size: 70px;
	color: white;
	font-family:"Calibri Light", Calibri, sans-serif;
	width: 100%;
	overflow: hidden;
}

#menu_option1, #menu_option2, #menu_option3, #menu_option4, #menu_option5 {
	width: 205px;
	height: 75px;
	float:left;
	display: block;
	position: relative;
	-webkit-transition-property:all;
	-webkit-transition-duration:.52s;
	z-index: 2;
	-webkit-transform: translateX(-205px)
}

#menu_option1 {
	background-color:#CCC;
}

#menu_option2 {
	background-color:#999;
}

#menu_option3 {
	background-color:#666;
}

#menu_option4 {
	background-color:#BBB;
}

#menu_option5 {
	background-color:#CCC;
}

#menu_bottom {
	background-color:#777;
	height: 100%;
	width: 20px;
	-webkit-transition-duration:.5s;
	overflow: hidden;
}

#menu_option1:hover ~ #main_section1 {
	visibility:visible;
	opacity:1.0;
}

#menu_option2:hover ~ #main_section2 {
	visibility:visible;
	opacity:1.0;
}

#menu_option3:hover ~ #main_section3 {
	visibility:visible;
	opacity:1.0;
}

#menu_option4:hover ~ #main_section4 {
	visibility:visible;
	opacity:1.0;
}

#menu_option5:hover ~ #main_section5 {
	visibility:visible;
	opacity:1.0;
}

#main_section1, #main_section2, #main_section3, #main_section4, #main_section5 {
	width: -webkit-calc(100% - 20px);
	height: 100%;
	position: absolute;
	background-color:#E0E0E0;
	margin-left: 20px;
	margin-right: 20px;
	-webkit-transform-origin: 0% 50%;
	-webkit-transform: perspective( 400 );
	-webkit-transition-duration:.5s;
}

#main_section2, #main_section3, #main_section4, #main_section5 {
	visibility:hidden;
	z-index: 1;
	opacity:0.0;
}

#menu_bottom:hover {
	width: 225px;
}

#menu_bottom:hover #menu_option1 {
	-webkit-transform: translateX(0px)
}
#menu_bottom:hover #menu_option2 {
	-webkit-transform: translateX(0px)
}
#menu_bottom:hover #menu_option3 {
	-webkit-transform: translateX(0px)
}
#menu_bottom:hover #menu_option4 {
	-webkit-transform: translateX(0px)
}
#menu_bottom:hover #menu_option5 {
	-webkit-transform: translateX(0px)
}

#menu_bottom:hover #main_section1 {
	-webkit-transform: perspective( 500 ) rotateY( 8deg ) scaleX(0.8);
	margin-left: 225px
}

#menu_bottom:hover #main_section2 {
	-webkit-transform: perspective( 500 ) rotateY( 8deg ) scaleX(0.8);
	margin-left: 225px
}

#menu_bottom:hover #main_section3 {
	-webkit-transform: perspective( 500 ) rotateY( 8deg ) scaleX(0.8);
	margin-left: 225px
}

#menu_bottom:hover #main_section4 {
	-webkit-transform: perspective( 500 ) rotateY( 8deg ) scaleX(0.8);
	margin-left: 225px
}

#menu_bottom:hover #main_section5 {
	-webkit-transform: perspective( 500 ) rotateY( 8deg ) scaleX(0.8);
	margin-left: 225px
}

#main_section_gradient	{
	-webkit-transform-origin: 0% 50%;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
	-webkit-transform: perspective( 400 ) rotateY( 0deg ) scaleX(1.0);
	-webkit-transition-duration:.5s;
	width: -webkit-calc(100% - 20px);
    height: 100%;
    position: absolute;
	z-index: 1;
	opacity:0.0;
	visibility:hidden;
	margin-left: 20px;
	margin-right: 20px;
}

#menu_bottom:hover #main_section_gradient {
	-webkit-transform: perspective( 500 ) rotateY( 8deg ) scaleX(0.8);
	opacity:1.0;
	visibility:visible;
	margin-left: 225px
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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