Image Slider CSS3 for Website/Blogger

Add a Stylish Image Slider with pure CSS3 for Website or Blogger.Let us follow the Steps Below.

               => Go to Blogger Click the Dashboard then
               => Click the Layout then
               => Add a Gadget then
               => Click the HTML/JavaScript then
               => Copy the Below code And Paste on it.

<style type="text/css" media="screen">
.container {
    margin: 0 auto;
    overflow: hidden;
    width: 700px;
}
#content-slider {
    height: 335px;
    width: 100%;
}
#slider {
    background: none repeat scroll 0 0 #000000;
    border: 5px solid #FFFFFF;
    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;
}

@-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://blogsitedesigns.blogspot.in/">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgehjlhE6QPa0oNcBTA_DnOxW0gLJnW9UuWbpSJqCwi_76YNpVPcFl3WV6HOHNTfhgKG-qu2JBBFhf3d1A6ImV_QB33i0JShxVLtH1Df6dA9xOoBGFC19BHpp4XvkV6qiK83YEEg8bEOyY/s1600/i4.jpg" alt="Stylish"/>
            </a>
            <div class="tooltip">
            <h1>Stylish</h1>
            </div>
            </li>

            <li id="second" class="secondanimation">
            <a href="http://blogsitedesigns.blogspot.in/">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe7V6hL7sXjtWB6qpNQa8vONJWpJQuZQTt3FmL0hSqHRq90OadqiHu7Cym8uswMZ6ihwglRuVQeX2VHGlIMqNk41Xj3RgZmZFxKUouRd8NnZqlIjGpQNpLYF7neJwWgcFaUP2MphRk13M/s1600/i41.jpg" alt="Amazing"/>
            </a>
            <div class="tooltip">
            <h1>Amazing</h1>
            </div>
            </li>
           
            <li id="third" class="thirdanimation">
            <a href="http://blogsitedesigns.blogspot.in/">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGuHeON65PiM1ylnt-K9v6N0vPm7Z5be4xwFlBX11a3BRaE6nQsG1d8Ti-_ydJU2FJsruxgCoUIxJkIQDbOTIcF2gpj1c5R5q4S_oIAxF8Fg_xgd7I_gJ6khyx5jx8rjW5VKshcsLZdyU/s1600/i42.jpg" alt="Beauty"/>
            </a>
            <div class="tooltip">
            <h1>Beauty</h1>
            </div>
            </li>
                       
            <li id="fourth" class="fourthanimation">
            <a href="http://blogsitedesigns.blogspot.in/">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAomse8XXaQ6ZH3QFyKSeVXZcaGk34Fmf9uWnNXqERoH0gRZExaW1PHAtf6LC1WGOUGVzYodwXykksTyCVQo3u7MMBpW8TAOnp-nFfCw8SWqztPm-i5PXCTjVC-zRXKNvcxEcIqrK7Lw8/s1600/i43.jpg" alt="Excellent"/>
            </a>
            <div class="tooltip">
            <h1>Excellent</h1>
            </div>
            </li>
                       
            <li id="fifth" class="fifthanimation">
            <a href="http://blogsitedesigns.blogspot.in/">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsVQHTOdaXYKBCULbBeUCFzxWdjmu2V5oUvHmLDI7qCakJBPihj9wj7mnpFwIM_XCqcOZvYbmnRCOuj_hg3NZcBR6slKidkznFWXQ4qpk1UJsz8DyiNvM_Xu-ddFSmQPohcig0-VvXbDI/s1600/i44.jpg
" alt="Stunning"/>
            </a>
            <div class="tooltip">
            <h1>Stunning</h1>
            </div>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div>

               => Change the Red Colored Images Link with your Image

Download

Image Slider link

275 KB

Demo

Image Slider

View a Sample