CSS3 (+ IE) image slider for MCDC

by sanford

HTML

<!--[if lte IE 10]>
<style type="text/css">
/* don't use opacity, even tho ie9 supports it */
#slides * {
    opacity: 1 !important;
}
#slides li img {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Fade(duration=.9)";
    filter: progid:DXImageTransform.Microsoft.Fade(duration=.9);
}
#slides li span {
    -ms-filter: "progid:DXImageTransform.Microsoft.Fade(duration=0)";
    filter: progid:DXImageTransform.Microsoft.Fade(duration=0);
}
/* #slides li:hover img, #slides li:hover span */
#slides li.firehover img, #slides li.firehover span {
    visibility: visible;
}
#slides li img {
    margin-bottom: 1px;
}
</style>
<![endif]-->
<!--[if gte IE 9]>
<style type="text/css">
/* bring back text fade b/c ie 9 fixes cleartype prob */
#slides li span {
    -ms-filter: "progid:DXImageTransform.Microsoft.Fade(duration=.9)";
    filter: progid:DXImageTransform.Microsoft.Fade(duration=.9);
}
</style>
<![endif]-->

<div id="slides">
                <ul>                
                    <li class="firehover"><img src="http://alpha.dancecapsules.merce.broadleafclients.com/images/SquaregameA.jpeg" alt="image description"/><span>Photo: Anna Ainke</span></li>
                    <li><img src="http://alpha.dancecapsules.merce.broadleafclients.com/images/SquaregameC.jpeg" alt="image description"/><span>Photo: Anna Clinke</span></li>
                    <li><img src="http://alpha.dancecapsules.merce.broadleafclients.com/images/SquaregameD.jpeg" alt="image description"/><span>Photo: Anna Dinke</span></li>
                    <li><img src="http://alpha.dancecapsules.merce.broadleafclients.com/images/SquaregameE.jpeg" alt="image description"/><span>Photo: Anna Einke</span></li>
                    <li id="theli" ZZstyle="    border: 1px dotted yellow;
"><img src="http://alpha.dancecapsules.merce.broadleafclients.com/images/SquaregameF.jpeg" alt="image description"/><span>Photo: Anna Finke</span></li>            
                </ul>
            </div>

CSS

#slides * {
    font-size: 12px;
    font-family: "Georgia";
    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: black;
    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: 46%;
    top: 270px;
    position: absolute; /* critical in ie to avoid extra hover area */
    background: black;
    text-align: right;
    font-style: italic;
    ZZoutline: 1px solid red;
}

#slides li:before {
    content: counter(req);
    position: absolute;
    top: 265px;
    border: 1px solid gray;
    background-color: blue;
    z-index: 999;
    width: 24px;
    line-height: 32px;
    height: 36px;
    pointer-events: auto;
    ZZoutline: 12px 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;
}
#slides:hover ul:hover li.firehover img
,#slides:hover ul:hover li.firehover span {
    opacity: 0;
}
#slides:hover ul:hover li.firehover:hover img
,#slides:hover ul:hover li.firehover:hover span {
    opacity:1;
}

JavaScript

!Browser.ie || $$('#slides li').addEvent('mouseenter',function(e) {
    var subEls = this.getElements('img, span');
    var allEls = $$('#slides li img, #slides li span');
        
    allEls.each(function(itm){
        itm.filters.item("DXImageTransform.Microsoft.Fade").apply();
    });
    
    allEls.each(function(itm){        
        itm.setStyle('visibility','hidden');
        // itm.setStyle('display','block');
    });
    
    subEls.each(function(itm){
        itm.setStyle('visibility','visible');
        //itm.setStyle('display','block');
    });
    allEls.each(function(itm){
        itm.filters.item("DXImageTransform.Microsoft.Fade").play();
    });
    
    /*
    superEls.each(function(itm){
        var superItm = itm;
        var foundIt = false;
        subEls.each(function(itm){
            if (itm.src && itm.src == superItm.src) {
                foundIt = true;
            }               
        });
    if (!foundIt) { 
    }    
    });
    */
});