Reflection Effect

Reflected kittens for http://stackoverflow.com/q/16763677/1454806

by Troy Alford

HTML

<div class="row-fluid">
    <div class="span12" id="cover_pictures">
        <div class="images">
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
        </div>  
    </div>
</div>

CSS

#cover_pictures { font-size: 0; }
.images { position: relative; }
.images > .img {
    display: inline-block;
    height: 350px; width: 50px;
    margin: 2px;
}
.images > .img, .images > .img:after {
    background-color: transparent;
    background-position: bottom center;
    background-repeat: no-repeat;
}

.images > .img:after {
    content: '';
    display: inline-block;
    width: 50px; height: 60px;
    position: absolute;
    bottom: -58px;
    
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv;
    filter: flipv;
    
    -moz-box-shadow: inset 0px 40px 60px #fff;
    -webkit-box-shadow: inset 0px 40px 60px #fff;
    box-shadow: inset 0px 40px 60px #fff;
}

.images > .img:nth-child(1), .images > .img:nth-child(1):after { 
    background-image: url(http://placekitten.com/110/350);
}
.images > .img:nth-child(2), .images > .img:nth-child(2):after { 
    background-image: url(http://placekitten.com/120/350);
}
.images > .img:nth-child(3), .images > .img:nth-child(3):after { 
    background-image: url(http://placekitten.com/130/350);
}
.images > .img:nth-child(4), .images > .img:nth-child(4):after { 
    background-image: url(http://placekitten.com/145/350);
}
.images > .img:nth-child(5), .images > .img:nth-child(5):after { 
    background-image: url(http://placekitten.com/150/350);
}
.images > .img:nth-child(6), .images > .img:nth-child(6):after { 
    background-image: url(http://placekitten.com/160/350);
}
.images > .img:nth-child(7), .images > .img:nth-child(7):after { 
    background-image: url(http://placekitten.com/170/350);
}
.images > .img:nth-child(8), .images > .img:nth-child(8):after { 
    background-image: url(http://placekitten.com/180/350);
}
.images > .img:nth-child(9), .images > .img:nth-child(9):after { 
    background-image: url(http://placekitten.com/195/350);
}
.images > .img:nth-child(10), .images > .img:nth-child(10):after { 
   ...