<div class="carousel">
<ul class="panes">
<li id="s1">
<img src="http://placekitten.com/950/300">
<div class="content">
<h3>RAY-BAN</h3>
<p>Iconic style is always in fashion</p>
</div>
</li>
<li id="s2">
<img src="http://placekitten.com/950/300">
<div class="content">
<h3>RAY-BAN</h3>
<p>Iconic style is always in fashion</p>
</div>
</li>
<li id="s3">
<img src="http://placekitten.com/950/300">
<div class="content">
<h3>RAY-BAN</h3>
<p>Iconic style is always in fashion</p>
</div>
</li>
<li id="s4">
<img src="http://placekitten.com/950/300">
<div class="content">
<h3>RAY-BAN</h3>
<p>Iconic style is always in fashion</p>
</div>
</li>
<li id="s5">
<img src="http://placekitten.com/950/300">
<div class="content">
<h3>RAY-BAN</h3>
<p>Iconic style is always in fashion</p>
</div>
</li>
</ul>
</div>
/*------------------------------------*\
$SHARED
\*------------------------------------*/
h1,p,
.carousel{
margin-bottom:24px;
margin-bottom:2rem;
}
/*------------------------------------*\
$MAIN
\*------------------------------------*/
html{
font:0.75em/1.5 "Helvetica Neue", Arial, sans-serif;
color:#333;
background-color:#fff;
padding:5% 25%;
}
small{
color:#999;
}
a{
color:#09f;
}
/*------------------------------------*\
$CAROUSEL
\*------------------------------------*/
.carousel{
overflow:hidden;
width:100%;
position:absolute;
left:0;
top:0;
}
.panes{
list-style:none;
position:relative;
height:100%;
width:500%; /* Number of panes * 100% */
overflow:hidden; /* This is used solely to clear floats, it does not add functionality. */
-webkit-animation:carousel 30s infinite;
-moz-animation:carousel 30s infinite;
animation:carousel 30s infinite;
}
.panes > li{
position:relative;
float:left;
width:20%; /* 100 / number of panes */
}
.panes > li > a{
display:block;
}
.carousel img{
display:block;
width:100%;
max-width:100%;
}
.carousel h2{
font-size:1em;
padding:0.5em;
position:absolute;
right:10px;
bottom:10px;
left:10px;
text-align:right;
color:#fff;
background-color:rgba(0,0,0,0.75);
}
@-moz-keyframes carousel{
0% { left:0; }
11% { left:0; }
12.5% { left:-100%; }
23.5% { left:-100%; }
25% { left:-200%; }
36% { left:-200%; }
37.5% { left:-300%; }
48.5% { left:-300%; }
50% { left:-400%; }
61% { left:-400%; }
62.5% { left:-300%; }
73.5% { left:-300%; }
75% { left:-200%; }
86% { left:-200%; }
87.5% { left:-100%; }
98.5% { left:-100%; }
100% { left:0; }
}
@-webkit-keyframes carousel{
0% { left:0; }
11% { left:0; }
12.5% { left:-100%; }
23.5% { left:-100%; }
25% { left:-200%; }
36% { left:-200%; }
37.5% { left:-300%; }
48.5% { left:-300%; }
50% { left:-400%; }
61% { left:-400%; }
62.5% { left:-300%; }
73.5% { left:-300%; }
75% { left:-200%; }
86% { left:-200%; }
87.5% { left:-100%; }
98.5% { left:-100%; }
100% { left:0; }
}
@keyframes carousel{
0% { left:0; }
11% { left:0; }
12.5% { left:-100%; }
23.5% { left:-100%; }
25% { left:-200%; }
36% { left:-200%; }
37.5% { left:-300%; }
48.5% { left:-300%; }
50% { left:-400%; }
61% { left:-400%; }
62.5% { left:-300%; }
73.5% { left:-300%; }
75% { left:-200%; }
86% { left:-200%; }
87.5% { left:-100%; }
98.5% { left:-100%; }
100% { left:0; }
}
.content {
position:absolute;
top:0;
right:0;
height:100%;
width:20%;
padding:10%;
background: rgb(164,78,0); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(164,78,0,1) 0%, rgba(239,127,32,1) 46%, rgba(240,185,37,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(164,78,0,1)), color-stop(46%,rgba(239,127,32,1)), color-stop(100%,rgba(240,185,37,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(164,78,0,1) 0%,rgba(239,127,32,1) 46%,rgba(240,185,37,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(164,78,0,1) 0%,rgba(239,127,32,1) 46%,rgba(240,185,37,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(164,78,0,1) 0%,rgba(239,127,32,1) 46%,rgba(240,185,37,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(164,78,0,1) 0%,rgba(239,127,32,1) 46%,rgba(240,185,37,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a44e00', endColorstr='#f0b925',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.content h3 {
font: 26px Futura, "Trebuchet MS", Arial, sans-serif;
position:relative;
color:#FFF;
}
li#s1 h3 {
-webkit-animation: title1 20s linear 0s infinite ;
animation: title1 1s linear 5s infinite ;
}
li#s2 h3 {
-webkit-animation: title2 1s linear 30s forwards;
animation: title2 1s linear 5s forwards;
}
li#s3 h3 {
-webkit-animation: title3 1s linear 60s forwards;
animation: title3 1s linear 10s forwards;
}
.content p {font:italic 14px Georgia, Times, "Times New Roman", serif; position:relative; top:0px; right:0; }
@-moz-keyframes title1 {
0% { left:0px; opacity:0; }
11% { left:200px; opacity:1; }
98.5% { left:200px; opacity:1; }
100% { left:0px; opacity:0; }
}
@-webkit-keyframes title1 {
0% { left:100px; opacity:0; }
11% { left:200px; opacity:1; }
98.5% { left:200px; opacity:1; }
100% { left:100px; opacity:0; }
}
@keyframes title1{
0% { left:100px; opacity:0; }
11% { left:200px; opacity:1; }
98.5% { left:200px; opacity:1; }
100% { left:100px; opacity:0; }
}
@-moz-keyframes title2{
0% { left:0%; opacity:0; }
100% { left:40%; opacity:1; }
}
@-webkit-keyframes title2{
0% { left:0%; opacity:0; }
100% { left:40%; opacity:1; }
}
@keyframes title2{
0% { left:0%; opacity:0; }
100% { left:40%; opacity:1; }
}
@-moz-keyframes title3{
0% { left:0%; opacity:0; }
100% { left:40%; opacity:1; }
}
@-webkit-keyframes title3{
0% { left:0%; opacity:0; }
100% { left:40%; opacity:1; }
}
@keyframes title3{
0% { left:0%; opacity:0; }
100% { left:40%; opacity:1; }
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.