Crazy Computer World: Pure CSS3 Image Slider for Blogspot (Cycle Style)

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYRx1OAVqX9qPbYcx6lXhtkb1wIVNgfqggp3P8t0MLirBVBM829peK2M3QY6mcM4GzVTclQZHWBJjdzCIPOg8Jx6Hcg40N00l12jm4Hyi9M5aYenCfHcZ5LWmNCaV5XtF0OWljJmGhvNcW/s1600/css3-image--slider.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYRx1OAVqX9qPbYcx6lXhtkb1wIVNgfqggp3P8t0MLirBVBM829peK2M3QY6mcM4GzVTclQZHWBJjdzCIPOg8Jx6Hcg40N00l12jm4Hyi9M5aYenCfHcZ5LWmNCaV5XtF0OWljJmGhvNcW/s1600/css3-image--slider.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<b><br /></b></div>
<div style="text-align: center;">
<b><br /></b></div>
</div>
<b><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">Here I came up with a stylish and hot image slider for blogger that is just using pure CSS3. No </span>Javascript<span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;"> or </span>jQuery<span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;"> is used. So this slider is more easy to customize for newbies, just need a basic HTML and little good CSS3 knowledge. No server side coding is used here, so all is on your hand.</span><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;"> Take a look on their page for more about it.</span></b><br />
<div style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">
<b>I created a bogarized version from theirs, it is now just need to follow few easy steps to installing this slider on blog.</b></div>
<br />
<br />
<br />
<h3 style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 20px; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
Lets follow the simple 4 steps to add this "CSS3 image slider to Blogger blog"</h3>
<div style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">
<b>1. Go to Blogger Dashboard > Layout ><br />2. Add a HTML/Javascript Gadget<br />3. Copy the code below and paste on it.</b></div>
<br />
<blockquote>
<pre><code><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 */
.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="#">
            <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" alt="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Caption</span>"/>
            </a>
            <div class="tooltip">
            <h1><span style="background-color: #eeeeee; color: #3d85c6; line-height: 21.119998931884766px;">About Image</span></h1>
            </div>
            </li>

<li id="second" class="secondanimation">
            <a href="#">
            <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" alt="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Caption</span>"/>
            </a>
            <div class="tooltip">
            <h1><span style="background-color: #eeeeee; color: #3d85c6; line-height: 21.119998931884766px;">About Image</span></h1>
            </div>
            </li>
            
            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" alt="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Caption</span>"/>
            </a>
            <div class="tooltip">
            <h1><span style="background-color: #eeeeee; color: #3d85c6; line-height: 21.119998931884766px;">About Image</span></h1>
            </div>
            </li>
                        
            <li id="fourth" class="fourthanimation">
            <a href="#">
            <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" alt="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Caption</span>"/>
            </a>
            <div class="tooltip">
            <h1><span style="background-color: #eeeeee; color: #3d85c6; line-height: 21.119998931884766px;">About Image</span></h1>
            </div>
            </li>
                        
            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" alt="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Caption</span>"/>
            </a>
            <div class="tooltip">
            <h1><span style="color: #3d85c6;"><span style="background-color: #eeeeee; line-height: 21.119998931884766px;">About Image</span></span></h1>
            </div>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div></code></pre>
</blockquote>
<br />
<b> <span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">4. Change the </span><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">blue</span><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;"> colored link with yours. and </span><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">red</span><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;"> colored images link with your images.</span></b></div>

Pure CSS3 Image Slider for Blogspot (Cycle Style)

Here I came up with a stylish and hot image slider for blogger that is just using pure CSS3. No Javascript or jQuery is used. ...

+ Read more »