CSS banner image animation

by Kheema Pandey

HTML

<div id="slider">
    <div class="module">
        <div class="inspect">
            <img src="http://devdesigned.com/intrinsecus/images/vegiheal.png" />
        </div>
    </div>
    <div class="module">
        <div class="inspect">
            <img src="http://devdesigned.com/intrinsecus/images/det075.png" />
        </div>
    </div>
    <div class="module">
        <div class="inspect">
            <img src="http://devdesigned.com/intrinsecus/images/demerald.png" />
        </div>
    </div>
    <div class="module">
        <div class="inspect">
            <img src="http://devdesigned.com/intrinsecus/images/designedbylp.png" />
        </div>
    </div>
    <div class="module">
        <div class="inspect">
            <img src="http://devdesigned.com/intrinsecus/images/humancanvas.png" />
        </div>
    </div>
    <div class="module">
        <div class="inspect">
            <img src="http://devdesigned.com/intrinsecus/images/vegiheal.png" />
        </div>
    </div>
    <div class="module">
        <div class="inspect">
            <img src="http://devdesigned.com/intrinsecus/images/vegiheal.png" />
        </div>
    </div>
</div>

CSS

#slider {
    position: relative;
}
#slider .module {
    background: rgba(0, 0, 0, 0.9);
    box-shadow: 0px 0px 20px 5px black;
    padding: 15px;
    width: 510px;
}
#slider .module .inspect {
    border: 5px solid rgba(150, 150, 100, 0.40);
    cursor: pointer;
    position: relative;
}
#slider .module .inspect img {
    width: 100%;
}
#slider .module.focus .inspect:after {
    background-color: rgba(0, 0, 0, 0.8);
    background-image: url(images/magnify.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30%;
    content:"";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0;
    -moz-transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    width: 100%;
    z-index: 10;
}
#slider .module.focus .inspect:hover:after {
    opacity: 0.8;
}
#slider {
    position: relative;
    white-space: nowrap;
}
#slider > * {
    margin-left: -270px;
    position: absolute;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}
#slider .module.left2 {
    left: 10%;
    z-index: 40;
    -webkit-transform: scale3d(0.2, 0.2, 1);
    -moz-transform: scale3d(0.2, 0.2, 1);
    transform: scale3d(0.2, 0.2, 1);
}
#slider .module.left1 {
    left: 25%;
    z-index: 45;
    -webkit-transform: scale3d(0.5, 0.5, 1);
    -moz-transform: scale3d(0.5, 0.5, 1);
    transform: scale3d(0.5, 0.5, 1);
}
#slider .module.focus {
    left: 50%;
    z-index: 50;
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
#slider .module.right1 {
    left: 75%;
    z-index: 45;
    -webkit-transform: scale3d(0.5, 0.5, 1);
    -moz-transform: scale3d(0.5, 0.5, 1);
    transform: scale3d(0.5, 0.5, 1);
}
#slider .module.right2 {
    left: 90%;
    z-index: 40;
    -webkit-transform: scale3d(0.2, 0.2, 1);
    -moz-transform: scale3d(0.2, 0.2, 1);
    transform: scale3d(0.2, 0.2,...

JavaScript

$('#slider').ready(function () {

    function slide(focus) {
        for (i = 0; i < $('#slider .module').length; i++) {
            if (i == focus.index() - 2) $('#slider .module').eq(i).addClass('left2').removeClass('left1 focus right1 right2 hidden');
            else if (i == focus.index() - 1) $('#slider .module').eq(i).addClass('left1').removeClass('left2 focus right1 right2 hidden');
            else if (i == focus.index() + 1) $('#slider .module').eq(i).addClass('right1').removeClass('left2 left1 focus right2 hidden');
            else if (i == focus.index() + 2) $('#slider .module').eq(i).addClass('right2').removeClass('left2 left1 focus right1 hidden');
            else if (focus.index() == i) $('#slider .module').eq(i).addClass('focus').removeClass('left2 left1 right1 right2 hidden');
            else $('#slider .module').eq(i).addClass('hidden').removeClass('left2 left1 focus right1 right2');
        }
    }

    slide($('#slider .module').eq(2));

    $('#slider .module').click(function () {
        slide($(this));
    });

});