<style> 

#slider { 

 width: 600px; 

 height: 200px; 

 margin: 40px auto 0; 

 overflow: visible; 

 background-color: #362c30; 

 border: 10px solid #362c30; 

 -moz-transition: all 150ms ease-in; 

 -webkit-transition: all 150ms ease-in; 

 -o-transition: all 150ms ease-in; 

 position: relative; 

} 

 

#mask { 

 overflow: hidden; 

} 

 

#slider:hover { 

 background-color: #fff; 

 border: 10px solid #ddd; 

} 

 

#slider:hover #pause { 

 opacity: 1; 

} 

 

#slider:hover #progress { 

 background-color: rgba(255,255,255,0.0); 

} 

 

#slider:hover ul, #slider:hover #progress, #slider:hover #overlay { 

 -moz-animation-play-state: paused; 

 -webkit-animation-play-state: paused; 

} 

 

#pause { 

 width: 600px; 

 height: 200px; 

 position: absolute; 

 top: 0; 

 opacity: 0; 

 background-image: url(http://4.bp.blogspot.com/-McXB4t7-Yic/T-SJM7gabwI/AAAAAAAACBI/lKDrkN-M-Z8/s1600/helperblogger.com-paused.png); 

 background-position: 566px 10px; 

 background-repeat: no-repeat; 

 pointer-events: none; 

 -moz-transition: all 150ms ease-in; 

 -webkit-transition: all 150ms ease-in; 

 -o-transition: all 150ms ease-in; 

} 

 

#progress { 

 width: 1px; 

 height: 1px; 

 background-color: #ffd000; 

 -moz-animation: progress 18s infinite; 

 -webkit-animation: progress 18s infinite; 

 position: relative; 

 top: -1px; 

 -moz-transition: all 150ms ease-in; 

 -webkit-transition: all 150ms ease-in; 

 -o-transition: all 150ms ease-in; 

} 

 

#overlay { 

 width: 600px; 

 height: 200px; 

 position: absolute; 

 top: 0; 

 background-image: url(http://1.bp.blogspot.com/-T3HoE0hcDSk/T-SJMBDpS7I/AAAAAAAACBA/gVo5LjEEOrY/s1600/helperblogger.com-overlay.png); 

 background-position: center; 

 background-repeat: no-repeat; 

 pointer-events: none; 

 -moz-transition: all 150ms ease-in; 

 -webkit-transition: all 150ms ease-in; 

 -o-transition: all 150ms ease-in; 

 opacity: 0.5; 

 -moz-animation: overlay-fade 18s infinite; 

 -webkit-animation: overlay-fade 18s infinite; 

} 

 

#slider ul { 

 width: 2400px; 

 list-style: none; 

 padding: 0; 

 margin: 0; 

 -moz-animation: slide-animation 18s infinite; 

 -webkit-animation: slide-animation 18s infinite; 

 position: relative; 

 left: 0px; 

} 

 

#slider li { 

 display: inline; 

 width: 600px; 

 height: 200px; 

 margin: 0; 

 padding: 0; 

 float: left; 

 position: relative; 

 background-image: url(http://4.bp.blogspot.com/-yKmATamNi5A/T-SJK85LUvI/AAAAAAAACA4/ZfhUPC0hYM0/s1600/helperblogger.com-loader.gif); 

 background-position: 50% 50%; 

 background-repeat: no-repeat; 

} 

 

#slider li:last-of-type { 

 background-color: #362c30; 

} 

 

#slider li a { 

 display: block; 

 text-decoration: none; 

} 

 

#slider li span { 

 display: block; 

 width: 560px; 

 padding: 15px 20px; 

 position: absolute; 

 bottom: 0; 

 left: 0; 

 background-color: rgba(54,44,48,0.6); 

 border-top: 1px solid #362c30; 

 text-shadow: 1px 1px 1px #362c30; 

 pointer-events: none; 

 text-align: left; 

} 

 

#slider-shadow { 

 width: 100%; 

 height: 260px; 

 background-image: url(http://2.bp.blogspot.com/-H3qemmsLsak/T-SJN16OKeI/AAAAAAAACBQ/cmXQQxIccVk/s1600/helperblogger.com-slider-shadow.png); 

 background-position: center bottom; 

 background-repeat: no-repeat; 

 margin: 10px auto 0; 

} 

 

@-webkit-keyframes slide-animation { 

0% {opacity:0;} 

2% {opacity:1;} 

20% {left:0px; opacity:1;} 

22.5% {opacity:0.6;} 

25% {left:-600px; opacity:1;} 

45% {left:-600px; opacity:1;} 

47.5% {opacity:0.6;} 

50% {left:-1200px; opacity:1;} 

70% {left:-1200px; opacity:1;} 

72.5% {opacity:0.6;} 

75% {left:-1800px; opacity:1;} 

95% {opacity:1;} 

98% {left:-1800px; opacity:0;} 

100% {left:0px; opacity:0;} 

} 

@-moz-keyframes slide-animation { 

0% {opacity:0;} 

2% {opacity:1;} 

20% {left:0px; opacity:1;} 

22.5% {opacity:0.6;} 

25% {left:-600px; opacity:1;} 

45% {left:-600px; opacity:1;} 

47.5% {opacity:0.6;} 

50% {left:-1200px; opacity:1;} 

70% {left:-1200px; opacity:1;} 

72.5% {opacity:0.6;} 

75% {left:-1800px; opacity:1;} 

95% {opacity:1;} 

98% {left:-1800px; opacity:0;} 

100% {left:0px; opacity:0;} 

} 

@-webkit-keyframes progress { 

0% {width:0px; opacity:0;} 

2% {width:0px; opacity:1;} 

20% {width:600px; opacity:1;} 

22.5% {width:600px; opacity:0;} 

22.59% {width:0px;} 

25% {width:0px; opacity:1;} 

45% {width:600px; opacity:1;} 

47.5% {width:600px; opacity:0;} 

47.59% {width:0px;} 

50% {width:0px; opacity:1;} 

70% {width:600px; opacity:1;} 

72.5% {width:600px; opacity:0;} 

72.59% {width:0px;} 

75% {width:0px; opacity:1;} 

95% {width:600px; opacity:1;} 

98% {width:600px; opacity:0;} 

100% {width:0px; opacity:0;} 

} 

@-moz-keyframes progress { 

0% {width:0px; opacity:0;} 

2% {width:0px; opacity:1;} 

20% {width:600px; opacity:1;} 

22.5% {width:600px; opacity:0;} 

22.59% {width:0px;} 

25% {width:0px; opacity:1;} 

45% {width:600px; opacity:1;} 

47.5% {width:600px; opacity:0;} 

47.59% {width:0px;} 

50% {width:0px; opacity:1;} 

70% {width:600px; opacity:1;} 

72.5% {width:600px; opacity:0;} 

72.59% {width:0px;} 

75% {width:0px; opacity:1;} 

95% {width:600px; opacity:1;} 

98% {width:600px; opacity:0;} 

100% {width:0px; opacity:0;} 

} 

@-webkit-keyframes overlay-fade { 

0% {opacity:0;} 

2% {opacity:0.5;} 

95% {opacity:0.5;} 

98% {opacity:0;} 

100% {opacity:0;} 

} 

@-moz-keyframes overlay-fade { 

0% {opacity:0;} 

2% {opacity:0.5;} 

95% {opacity:0.5;} 

98% {opacity:0;} 

100% {opacity:0;} 

} 

 

#slider ul li span h2 { 

 font-size: 24px; 

 line-height: 24px; 

 color: #fff; 

 font-weight: normal; 

 font-family: 'Communist-Regular'; 

 text-shadow: 1px 1px 1px #362c30; 

} 

 </style> 

 

 

<div id="slider-shadow"> 

 <div id="slider"> 

 <div id="mask"> 

 <ul> 

 <li> 

 <a href="#" title="ADD YOUR TITLE HERE"><img src="http://www.picz.ge/img/s4/1208/19/c/cf4ca149bba3.jpg"></a><span><h2></h2></span> 

 </li> 

 <li> 

 <a href="#" title="ADD YOUR TITLE HERE"><img src="http://www.picz.ge/img/s1/1208/19/0/0f2940557392.jpg"></a> 

 <span><h2></h2></span> 

 </li> 

 <li> 

 <iframe src="http://www.picz.ge/img/s3/1208/19/8/853e4b5ca9cf.jpg" width="600" height="200" frameborder="0" scrolling="no"></iframe> 

 <span><h2></h2></span> 

 </li> 

 <li> 

 <a href="#" title="ADD YOUR TITLE HERE"><img src="http://www.picz.ge/img/s1/1208/19/0/0d4e99d39a7d.jpg"></a> 

 </li> 

 </ul> 

 </div> 

 <div id="progress"> 

 </div> 

 <div id="overlay"> 

 </div> 

 <div id="pause"> 

 </div> 

 </div> 

 </div>