<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; }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.