JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<h1>Slider Content use 100% CSS3</h1>
<div id="serelek"><div id="topeng"><ul><li><a href="/"><img src="http://www.google.com/logos/2011/parkes_observatory_50th_Anniversary-2011-hp.jpg" /></a></li><li><a href="http://ben-tools.blogspot.com/"><img src="http://www.google.com/logos/2011/halloween-2011-hp.jpg" /></a><span><h2>BEN TOOLS</h2></span></li><li><iframe src="http://en.wikipedia.org/wiki/Blogspot" width="600" height="200" frameborder="0" scrolling="no"></iframe><span><h2>Blogger Service</h2></span></li><li><a href="http://embah-google.blogspot.com/"><img src="http://www.google.com/logos/2011/austria_day-2011-hp.jpg" /></a></li></ul></div><div id="progress"></div><div id="overlay"></div><div id="eren"></div></div>
      <p class="cred" align="center"> Creativity by <a href="http://ben-tools.blogspot.com/">Beben Koben</a></p>

CSS

#serelek{width:600px;height:200px;margin:10px auto 5px;overflow:visible;background-color:#333;border:10px solid #BB833A;-moz-transition:all 150ms ease-in;-webkit-transition:all 150ms ease-in;-o-transition:all 150ms ease-in;position:relative;transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg)}#topeng{overflow:hidden}#serelek:hover{background-color:#fff;border:10px solid #555;-webkit-animation:rotatey 400ms ease-out;-moz-animation:rotatey 400ms ease-out}#serelek:hover #eren{opacity:1}#serelek:hover #progress{background-color:#F00}#serelek:hover ul,#serelek:hover #progress,#serelek:hover #overlay{-moz-animation-play-state:paused;-webkit-animation-play-state:paused}#eren{width:600px;height:200px;position:absolute;top:0;opacity:0;background-image:url(http://4.bp.blogspot.com/-ywClnXkDXbc/TrfUOlFoSBI/AAAAAAAAERU/wilUJrLpc3A/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:#0F0;-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://3.bp.blogspot.com/-b6l4-RqdMtA/TrfXfpEH5YI/AAAAAAAAERg/5kwWkLsz7Zs/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:.3;-moz-animation:overlay-fade 18s infinite;-webkit-animation:overlay-fade 18s infinite}#serelek 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:0}#serelek...