CodePen

HTML

            
              <div style="	min-width: 1125px; ">

		<div id="st-new">
			<div id="st-new-head">Learn Something New Today</div>
			<ul id="st-new-ul">
				<li id="st-new-li">
					<div id="st-new-box-l" class="s1 anim">
						<a href="http://zevolving.com/category/abapobjects/oo-concepts/" class="anim">
							<span>Concepts</span>
						</a>
						<div class="div-img anim">
							<div class="st-conc"></div>
						</div>
						<div class="st-new-hide anim">
							<ul>
								<li><a href="http://zevolving.com/2012/01/abstract-class-vs-interface/">Abstract class vs Interface</a></li>
								<li><a href="http://zevolving.com/2012/05/abap-objects-achieve-multiple-inheritance-using-interfaces/">Multiple Inheritance</a></li>
								<li><a href="http://zevolving.com/2012/01/when-to-use-local-class-and-when-not-to/">When to use Local Class</a></li>
								<li><a href="http://zevolving.com/2011/12/class-based-exception/">Class Based Exceptions</a></li>
								<li><a href="http://zevolving.com/2011/02/class_constructor-and-constructor-who-comes-before-whom/">Constructors</a></li>
							</ul>					
							<a href="http://zevolving.com/category/abapobjects/oo-concepts/">More »</a>
						</div>
					</div>
				</li>
				<li id="st-new-li">
					<div id="st-new-box-l" class="s2 anim">
						<a href="http://zevolving.com/category/abapobjects/oo-design-patterns/" class="anim">
							<span>Design Patterns</span>
						</a>
						<div class="div-img anim" style="">
							<div class="st-dp"></div>
						</div>
						<div class="st-new-hide anim">
							<ul>
								<li><a href="http://zevolving.com/2008/09/abap-object-design-patterns-singleton/">Singleton</a></li>
								<li><a href="http://zevolving.com/2008/10/abap-objects-design-patterns-model-view-controller-mvc-part-1/">Model View Controller</a></li>
								<li><a href="http://zevolving.com/2012/02/abap-objects-design-patterns-singleton-factory/">Singleton Factory</a></li>
								<li><a href="http://zevolving.com/2011/10/abap-objects-design-patterns-decorator/">Decorator</a></li>
								<li><a href="http://zevolving.com/2011/11/case-study-observer-design-pattern-usage/">Observer</a></li>
							</ul>
							<a href="http://zevolving.com/category/abapobjects/oo-design-patterns/">More »</a>
						</div>
					</div>
				</li>
				<li id="st-new-li">
					<div id="st-new-box-l" class="s3 anim">
						<a href="http://zevolving.com/category/dynamic-itab/" class="anim">
							<span>Dynamic ITABs</span>
						</a>						
						<div class="div-img anim">
							<div class="st-itab"></div>
						</div>
						<div class="st-new-hide anim">
							<ul>
								<li><a href="http://zevolving.com/2008/09/dynamic-internal-table-creation/">Using RTTS</a></li>
								<li><a href="http://zevolving.com/2008/10/dynamic-internal-table-with-deep-structure/">with Deep Structure</a></li>
								<li><a href="http://zevolving.com/2008/11/dynamic-internal-table-creation-using-class-cl_alv_table_create/">ALV Table Create class</a></li>
								<li><a href="http://zevolving.com/2008/12/dynamic-internal-table/">Classical approach</a></li>
							</ul>	
							<a href="http://zevolving.com/category/dynamic-itab/">More »</a>
						</div>
					</div>
				</li>
				<li id="st-new-li">
					<div id="st-new-box-l" class="s4 anim">
						<a href="http://zevolving.com/category/salv-tutorial/salv-table/" class="anim">
							<span>SALV Tutorials</span>
						</a>						
						<div class="div-img anim">
							<div class="st-salv"></div>
						</div>
						<div class="st-new-hide anim">
							<ul>
								<li><a href="http://zevolving.com/2008/09/salv-table-1-normal-alv-table-display/">Normal Table Display</a></li>
								<li><a href="http://zevolving.com/2011/10/salv-table-16-static-filters/">Static Filters</a></li>
								<li><a href="http://zevolving.com/2011/09/salv-15-show-count-of-displayed-rows/">Count of displayed data</a></li>
								<li><a href="http://zevolving.com/2009/12/salv-table-11-apply-aggregations/">Aggregations</a></li>
								<li><a href="http://zevolving.com/2011/02/sap-abap-help-needs-your-help/">Editable SALV</a></li>
							</ul>					
							<a href="http://zevolving.com/category/salv-tutorial/salv-table/">More »</a>
						</div>
					</div>
				</li>
				<li id="st-new-li">
					<div id="st-new-box-l" class="s5 anim">
						<a href="http://zevolving.com/category/performance/" class="anim">
							Performance
						</a>						
						<div class="div-img anim">
							<div class="st-perf"></div>
						</div>
						<div class="st-new-hide anim">
							<ul>
								<li><a href="http://zevolving.com/2009/12/use-of-field-symbols-vs-work-area/">FieldSymobls vs WA</a></li>
								<li><a href="http://zevolving.com/2009/12/parallel-cursor-to-speed-up-performance-of-nested-loop/">Parallel Cursor</a></li>
								<li><a href="http://zevolving.com/2011/06/performance-of-itab-copy/">ITAB Copy</a></li>
								<li><a href="http://zevolving.com/2012/05/performance-of-using-keys-in-select-with-for-all-entries/">FOR ALL Entries </a></li>
								<li><a href="http://zevolving.com/2009/12/measure-the-performance-between-break-points-using-se30/">Between breakpoints</a></li>
							</ul>					
							<a href="http://zevolving.com/category/performance/">More »</a>							
						</div>
					</div>
				</li>
			</ul>
</div>
		</div>
            
          
!
via HTML Inspector

CSS

            
              /* learn new today */
body{ font: normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif; }
a{ text-decoration: none; }
a:hover{text-decoration:none;}

#st-new{
	height: 120px;
	padding: 20px 0px;
/*
	background: #888;
	background-image: -webkit-linear-gradient(#333, #585858);
	background-image: -moz-linear-gradient(top, #333, #585858);
	background-image: -ms-linear-gradient(top, #333, #585858);
	background-image: -o-linear-gradient(top, #333, #585858);
	border-top: 3px solid #333;
	margin-bottom: 20px;
*/
	margin: 0 auto;
	width: 80%;
	min-width: 1125px;
}
.st-hang-left{
	display:none;
	position: absolute;
	height: 110px;
	width: 5px;
	margin-top: -130px;
	margin-left: 50px;
	border-left: 5px dotted #222;
	border-right: 5px solid #222;
}
.st-hang-right{
	display:none;
	position: absolute;
	height: 110px;
	width: 5px;
	margin-top: -130px;
	margin-left: 1000px;
	border-left: 5px solid #222;
	border-right: 5px dotted #222;
}
#st-new-head{
	font-size: 40px;
	color: lightSlateGray;
	margin: 0 auto;
	text-align: center;
	text-shadow: 1px 1px white;
	display:none;
}
#st-new-ul{
	list-style: none;
	margin: 0 auto;
	height: 100%;
	padding: 0;
}
#st-new-li{
	width: 18%;
	height: 120px;
	float: left;
	overflow: hidden;
	margin: 5px;
	background: #ddd;
	border: 2px solid #ccc;
}
#st-new-box-l{
	width: 100%;
	height: 100%;
	display: inline-block;
	float: left;
}
.anim{
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
}
#st-new-li > .s1 { border-top: 5px solid #FFC000;}
#st-new-li > .s2 { border-top: 5px solid #00B050;}
#st-new-li > .s3 { border-top: 5px solid #FF0000;}
#st-new-li > .s4 { border-top: 5px solid #7030A0;}
#st-new-li > .s5 { border-top: 5px solid #00B0F0;}
#st-new-li > .s1:hover{ background: #FFC000; } 
#st-new-li > .s2:hover{ background: #00B050; }
#st-new-li > .s3:hover{ background: #FF0000; }
#st-new-li > .s4:hover{ background: #7030A0; }
#st-new-li > .s5:hover{ background: #00B0F0; }
@-webkit-keyframes stnew-1 {
    50% { background: #FFC000; } }
  @-moz-keyframes stnew-1 {
    50% { background: #FFC000; } }
  #st-new-li > .s1{
    -webkit-animation: stnew-1 1.5s 1.1s ease 1;
    -moz-animation:    stnew-1 1.5s 1.1s ease 1; }

@-webkit-keyframes stnew-2 {
    50% { background: #00B050; } }
  @-moz-keyframes stnew-2 {
    50% { background: #00B050; } }
  #st-new-li > .s2 {
    -webkit-animation: stnew-2 1.5s 1.2s ease 1;
    -moz-animation:    stnew-2 1.5s 1.2s ease 1; }	

@-webkit-keyframes stnew-3 {
    50% { background: #FF0000; } }
  @-moz-keyframes stnew-3 {
    50% { background: #FF0000; } }
  #st-new-li > .s3 {
    -webkit-animation: stnew-3 1.5s 1.3s ease 1;
    -moz-animation:    stnew-3 1.5s 1.3s ease 1; }	

@-webkit-keyframes stnew-4 {
    50% { background: #7030A0; } }
  @-moz-keyframes stnew-4 {
    50% { background: #7030A0; } }
  #st-new-li > .s4 {
    -webkit-animation: stnew-4 1.5s 1.4s ease 1;
    -moz-animation:    stnew-4 1.5s 1.4s ease 1; }	

@-webkit-keyframes stnew-5 {
    50% { background: #00B0F0; } }
  @-moz-keyframes stnew-5 {
    50% { background: #00B0F0; } }
  #st-new-li > .s5 {
    -webkit-animation: stnew-5 1.5s 1.5s ease 1;
    -moz-animation:    stnew-5 1.5s 1.5s ease 1; }	

#st-new-box-r{
	height: 99%;
	font-size: 24px;
	border: 1px solid blue;
	display: inline-block;
	float: left;	
}
.st-new-hide{
	position: relative;
	margin-top: 120px;
}
#st-new-box-l  .st-new-hide{
}
#st-new-box-l:hover  .st-new-hide{
	margin-top: 20px;
}
#st-new-box-l > a{
	position: absolute;
	color: #666;
	font: normal 24px segoe ui, arial, helvetica, sans-serif;
	text-shadow: 0 1px 1px whitesmoke;
}
#st-new-box-l:hover > a{
	font-size: 16px;
	color: whitesmoke;
	text-shadow: none;
}

#st-new-box-l .div-img{ 
	width: 100%; 
	height: 100%;
	text-align: center; 
	padding-top: 40px; 
	position: relative; 
}
#st-new-box-l:hover .div-img { 
	margin-top: -160px;
}
#st-new-box-l .div-img > div{ 
	height: 48px;
	width: 48px;
	margin-left: 70px;
}
.st-salv{ background: url(https://dl.dropbox.com/u/86419463/sprite_learn_new.png) no-repeat; background-position: 0px 0px;}
.st-itab{ background: url(https://dl.dropbox.com/u/86419463/sprite_learn_new.png) no-repeat; background-position: 0px -53px;}
.st-perf{ background: url(https://dl.dropbox.com/u/86419463/sprite_learn_new.png) no-repeat; background-position: 0px -106px;}
.st-dp{ background: url(https://dl.dropbox.com/u/86419463/sprite_learn_new.png) no-repeat; background-position: 0px -159px;}
.st-conc{ background: url(https://dl.dropbox.com/u/86419463/sprite_learn_new.png) no-repeat; background-position: 0px -212px;}
.st-new-hide ul{
	list-style: square;
	padding-left: 20px;
	margin-top: 5px;
}
.st-new-hide li, .st-new-hide a{
	color: white;
}
.s1 .st-new-hide li, .s1 .st-new-hide a{
	color: blue;
}
.st-new-hide > a {
	display: inline-block;
	width: 100%;
	text-align: right;
}
.st-new-hide a:hover{
	border-bottom: 1px dotted;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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