JSFiddle - React, Tailwind, and code Playground

by xtreal

HTML

<div id="slider-shadow">
     <div id="slider">
      <div id="mask">
       <ul>
        <li>
         <a href="#" title="Resim için title ekle"><img src="http://2.bp.blogspot.com/-DX76JjnhxSU/T-SKKTpfngI/AAAAAAAACBc/QFZHfs5Ennw/s1600/helperblogger.com-1.png" /></a><span><h2>Açıklama Yazısını Buraya Yazınız....</h2></span>
        </li>
        <li>
         <a href="#" title="ADD YOUR TITLE HERE"><img src="http://4.bp.blogspot.com/-0u9BoJX6wj8/T-SK6zLuh4I/AAAAAAAACB0/pz-fWY1Y2xQ/s1600/helperblogger.com-4.png" /></a>
         <span><h2>Açıklama Yazısını Buraya Yazınız....</h2></span>
        </li>
        <li>
         <a href="#" title="ADD YOUR TITLE HERE"><img src="http://4.bp.blogspot.com/-0u9BoJX6wj8/T-SK6zLuh4I/AAAAAAAACB0/pz-fWY1Y2xQ/s1600/helperblogger.com-4.png" /></a>
         <span><h2>Açıklama Yazısını Buraya Yazınız....</h2></span>
        </li>
        <li>
         <a href="#" title="ADD YOUR TITLE HERE"><img src="http://1.bp.blogspot.com/-ohkIGz2VT7Q/T-SKOV6BBMI/AAAAAAAACBs/MTRsSvPEgmk/s1600/helperblogger.com-3.png" /></a>
            <span><h2>Açıklama Yazısını Buraya Yazınız....</h2></span>
        </li>
       </ul>
      </div>
      <div id="progress">
      </div>
      <div id="overlay">
      </div>
      <div id="pause">
      </div>
     </div>
    </div>

CSS

#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;
   ...