Image Slider for Blogspot CSS3

2,043 ledoc

#slider {
    background: none repeat scroll 0 0 #000000;
    border: 5px solid #FFFFFF;
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
       -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    height: 320px;
    margin: 10px auto;
    overflow: visible;
    position: relative;
    width: 680px;
}

#mask {
    height: 320px;
    overflow: hidden;
}

#slider ul {
    margin: 0;
    padding: 0;
    position: relative;
}

#slider li {
    width: 680px;
    height: 320px;
    position: absolute;
    top: -325px;
    list-style: none;
}

#slider li.firstanimation {
    -moz-animation: cycle 25s linear infinite;
    -webkit-animation: cycle 25s linear infinite;
}

#slider li.secondanimation {
    -moz-animation: cycletwo 25s linear infinite;
    -webkit-animation: cycletwo 25s linear infinite;
}

#slider li.thirdanimation {
    -moz-animation: cyclethree 25s linear infinite;
    -webkit-animation: cyclethree 25s linear infinite;
}

#slider li.fourthanimation {
    -moz-animation: cyclefour 25s linear infinite;
    -webkit-animation: cyclefour 25s linear infinite;
}

#slider li.fifthanimation {
    -moz-animation: cyclefive 25s linear infinite;
    -webkit-animation: cyclefive 25s linear infinite;
}

#slider .tooltip {
    background: rgba(0, 0, 0, 0.7);
    width: 300px;
    height: 60px;
    position: relative;
    bottom: 75px;
    left: -320px;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

#slider .tooltip h1 {
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: 60px;
    padding: 0 0 0 20px;
}

#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
    left: 0px;
}

.progress-bar {
    position: relative;
    top: -5px;
    width: 680px;
    height: 5px;
    background: #000;
    -moz-animation: fullexpand 25s ease-out infinite;
    -webkit-animation: fullexpand 25s ease-out infinite;
}

/* ANIMATION */

@-moz-keyframes cycle {
    0% {
        top: 0px;
    }
    4% {
        top: 0px;
    }
    16% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    20% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    21% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    92% {
        top: -325px;
        opacity: 0;
        z-index: 0;
    }
    96% {
        top: -325px;
        opacity: 0;
    }
    100% {
        top: 0px;
        opacity: 1;
    }
}

@-moz-keyframes cycletwo {
    0% {
        top: -325px;
        opacity: 0;
    }
    16% {
        top: -325px;
        opacity: 0;
    }
    20% {
        top: 0px;
        opacity: 1;
    }
    24% {
        top: 0px;
        opacity: 1;
    }
    36% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    40% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    41% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@-moz-keyframes cyclethree {
    0% {
        top: -325px;
        opacity: 0;
    }
    36% {
        top: -325px;
        opacity: 0;
    }
    40% {
        top: 0px;
        opacity: 1;
    }
    44% {
        top: 0px;
        opacity: 1;
    }
    56% {
        top: 0px;
        opacity: 1;
    }
    60% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    61% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@-moz-keyframes cyclefour {
    0% {
        top: -325px;
        opacity: 0;
    }
    56% {
        top: -325px;
        opacity: 0;
    }
    60% {
        top: 0px;
        opacity: 1;
    }
    64% {
        top: 0px;
        opacity: 1;
    }
    76% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    80% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    81% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@-moz-keyframes cyclefive {
    0% {
        top: -325px;
        opacity: 0;
    }
    76% {
        top: -325px;
        opacity: 0;
    }
    80% {
        top: 0px;
        opacity: 1;
    }
    84% {
        top: 0px;
        opacity: 1;
    }
    96% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    100% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
}

@-webkit-keyframes cycle {
    0% {
        top: 0px;
    }
    4% {
        top: 0px;
    }
    16% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    20% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    21% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    50% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    92% {
        top: -325px;
        opacity: 0;
        z-index: 0;
    }
    96% {
        top: -325px;
        opacity: 0;
    }
    100% {
        top: 0px;
        opacity: 1;
    }
}

@-webkit-keyframes cycletwo {
    0% {
        top: -325px;
        opacity: 0;
    }
    16% {
        top: -325px;
        opacity: 0;
    }
    20% {
        top: 0px;
        opacity: 1;
    }
    24% {
        top: 0px;
        opacity: 1;
    }
    36% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    40% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    41% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@-webkit-keyframes cyclethree {
    0% {
        top: -325px;
        opacity: 0;
    }
    36% {
        top: -325px;
        opacity: 0;
    }
    40% {
        top: 0px;
        opacity: 1;
    }
    44% {
        top: 0px;
        opacity: 1;
    }
    56% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    60% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    61% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@-webkit-keyframes cyclefour {
    0% {
        top: -325px;
        opacity: 0;
    }
    56% {
        top: -325px;
        opacity: 0;
    }
    60% {
        top: 0px;
        opacity: 1;
    }
    64% {
        top: 0px;
        opacity: 1;
    }
    76% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    80% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    81% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@-webkit-keyframes cyclefive {
    0% {
        top: -325px;
        opacity: 0;
    }
    76% {
        top: -325px;
        opacity: 0;
    }
    80% {
        top: 0px;
        opacity: 1;
    }
    84% {
        top: 0px;
        opacity: 1;
    }
    96% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    100% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
}

/* ANIMATION BAR */

@-moz-keyframes fullexpand {
    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        width: 0%;
        opacity: 0;
    }
    4%,
    24%,
    44%,
    64%,
    84% {
        width: 0%;
        opacity: 0.3;
    }
    16%,
    36%,
    56%,
    76%,
    96% {
        width: 100%;
        opacity: 0.7;
    }
    17%,
    37%,
    57%,
    77%,
    97% {
        width: 100%;
        opacity: 0.3;
    }
    18%,
    38%,
    58%,
    78%,
    98% {
        width: 100%;
        opacity: 0;
    }
}

@-webkit-keyframes fullexpand {
    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        width: 0%;
        opacity: 0;
    }
    4%,
    24%,
    44%,
    64%,
    84% {
        width: 0%;
        opacity: 0.3;
    }
    16%,
    36%,
    56%,
    76%,
    96% {
        width: 100%;
        opacity: 0.7;
    }
    17%,
    37%,
    57%,
    77%,
    97% {
        width: 100%;
        opacity: 0.3;
    }
    18%,
    38%,
    58%,
    78%,
    98% {
        width: 100%;
        opacity: 0;
    }
}
</style>
<div class="container">
    <div id="content-slider">
        <div id="slider">
            <div id="mask">
                <ul>
                    <li id="first" class="firstanimation">
                        <a href="http://dimpost.com">
                            <img src="http://project.dimpost.com/image-slider/images/img_1.jpg" alt="Cougar" />
                        </a>
                        <div class="tooltip">
                            <h1>Cougar</h1>
                        </div>
                    </li>
                    <li id="second" class="secondanimation">
                        <a href="#">
                            <img src="http://project.dimpost.com/image-slider/images/img_2.jpg" alt="Lions" />
                        </a>
                        <div class="tooltip">
                            <h1>Lions</h1>
                        </div>
                    </li>
                    <li id="third" class="thirdanimation">
                        <a href="#">
                            <img src="http://project.dimpost.com/image-slider/images/img_3.jpg" alt="Snowalker" />
                        </a>
                        <div class="tooltip">
                            <h1>Snowalker</h1>
                        </div>
                    </li>
                    <li id="fourth" class="fourthanimation">
                        <a href="#">
                            <img src="http://project.dimpost.com/image-slider/images/img_4.jpg" alt="Howling" />
                        </a>
                        <div class="tooltip">
                            <h1>Howling</h1>
                        </div>
                    </li>
                    <li id="fifth" class="fifthanimation">
                        <a href="#">
                            <img src="http://project.dimpost.com/image-slider/images/img_5.jpg" alt="Sunbathing" />
                        </a>
                        <div class="tooltip">
                            <h1>Sunbathing</h1>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div>

CSS

Image Slider for Blogspot CSS3

Recommended