image fade in

Cool image fade-in effect for galleries.

HTML

<script src="http://ajax.cdnjs.com/ajax/libs/modernizr/1.7/modernizr-1.7.min.js"></script>
<div id="gallery">
    
    <img src="https://pixabay.com/static/uploads/photo/2013/07/12/16/23/alphabet-150820__180.png" width="110" height="110">
    
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/16/23/alphabet-150823__180.png" width="110" height="110">
    
   <img src="https://pixabay.com/static/uploads/photo/2013/07/12/16/23/alphabet-150815__180.png" width="110" height="110">
    
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/16/23/alphabet-150823__180.png" width="110" height="110">
    
</div>

CSS

#gallery img {
    border-radius:5px;
    border:solid 1px #fff;
    box-shadow:1px 1px 3px rgba(0,0,0,0.3),
        inset 0 0 6px rgba(0,0,0,0.8);
}
#gallery a:hover img {
    top:-6px;
}

.fade-before {
    position:relative;
    left:-25px;
    top:0;
    opacity:0;
}
.fade-after {
    opacity:1;
    left:0;
    transition: all 400ms;
    -webkit-transition: all 400ms;
    -moz-transition: all 400ms;
}

JavaScript

if (Modernizr.csstransitions)
{
    $(document).ready(function(){
        $('#gallery img').addClass('fade-before');
    });
    
    $(window).load(function(){
        $('#gallery img').each(function(i, el){
            setTimeout(function(){
                $(el).addClass('fade-after');
            }, i * 100);
        });
    });
}