JSFiddle - React, Tailwind, and code Playground

by sanford

HTML

<!--[if lte IE 8]>
<style type="text/css">
#slides li img, #slides li span {
    ZZvisibility: hidden;
    display:none;
}
#slides li:hover img, #slides li:hover span
,#slides li.firehover img, #slides li.firehover span {
    ZZvisibility: visible;
    display: block;
}
#slides li img {
    margin-bottom: 1px;
}
</style>
<![endif]-->
<div id="slides">
                <ul>                
                    <li class="firehover"><img src="http://alpha.dancecapsules.merce.broadleafclients.com/images/SquaregameD.jpeg" alt="image description"/><span>Photo: Anna Ainke</span></li>
                    <li><img src="http://alpha.dancecapsules.merce.broadleafclients.com/images/SquaregameA.jpeg" alt="image description"/><span>Photo: Anna Blinke</span></li>
                    <li><img src="http://alpha.dancecapsules.merce.broadleafclients.com/images/SquaregameF.jpeg" alt="image description"/><span>Photo: Anna Cinke</span></li>
                    <li><img src="http://alpha.dancecapsules.merce.broadleafclients.com/images/SquaregameE.jpeg" alt="image description"/><span>Photo: Anna Dinke</span></li>
                    <li><img src="http://alpha.dancecapsules.merce.broadleafclients.com/images/SquaregameC.jpeg" alt="image description"/><span>Photo: Anna Einke</span></li>            
                </ul>
            </div>

CSS

#slides * {
    font-size: 16px;
    color: white;
}
#slides li img {
    width: 395px;
    height: 265px;
    margin-bottom: -4px;
}
#slides {
    width: 395px;
    ZZwidth: 450px;
    ZZheight: 265px;
    height: 315px;
    overflow: hidden;
    background-color: turquoise;
    position: relative;
}
#slides li {
    position:absolute;
    top:0;
    left:0;
    counter-increment: req; 
    pointer-events: none;
    cursor: pointer;
}
#slides li img, #slides li span {
    opacity:0;
    -webkit-transition: opacity 1150ms ease-in 0ms;
    -moz-transition: opacity 1150ms ease-in 0ms;
    cursor: default; /* ie */
}
#slides li span {
    display: inline-block;
    width: 50%;
    left: 48%;
    position: relative;
    background: yellowgreen;
    text-align: right;
    font-style: italic;
    outline: 1px solid red;
}

#slides li:before {
    content: counter(req);
    position: absolute;
    top: 265px;
    border: 1px solid gray;
    background-color: blue;
    z-index: 2;
    width: 24px;
    pointer-events: auto;
    outline: 1px solid orange;
    text-align: center;
}
#slides li:before { left: 24px; }
#slides li + li:before { left: 48px; }
#slides li + li + li:before { left: 72px; }
#slides li + li + li + li:before { left: 96px; }
#slides li + li + li + li + li:before { left: 120px; }

#slides li:hover img, #slides li:hover span
,#slides li.firehover img, #slides li.firehover span {
    opacity: 1;
    -webkit-transition: opacity 1150ms ease-in 0ms;
    -moz-transition: opacity 1150ms  ease-in 0ms;
}