title: 3-columns carousel slider black and white centered image
body: <p>I use the following carousel slider and I want left and right image to be black &amp; white except from centered image. I have to use the following css3: <code>-webkit-filter: grayscale(100%); filter: grayscale(100%);</code></p>
  
  <p>Where should I write it?</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;    &lt;!--  "container-fluid" --&gt;
     &lt;div class="row"&gt; 
          &lt;div class="col-md-12 center-block"&gt;
              &lt;div class="carousel slide" id="myCarousel"&gt;
                  &lt;div class="carousel-inner"&gt;
                      &lt;div class="item active"&gt;
                          &lt;div class="col-xs-4"&gt;&lt;a href="#"&gt;&lt;img  src="../images/01.jpg" class="img-responsive"&gt;&lt;/a&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;div class="col-xs-4"&gt;&lt;a href="#"&gt;&lt;img src="../images/02.jpg" class="img-responsive"&gt;&lt;/a&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;div class="col-xs-4"&gt;&lt;a href="#"&gt;&lt;img src="../images/03.jpg" class="img-responsive"&gt;&lt;/a&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev" style=""&gt;&lt;i class="glyphicon glyphicon-chevron-left"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;&lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; &lt;!-- row --&gt;
  
  &lt;/div&gt; &lt;!-- container fluid --&gt;
  
  &lt;script&gt;
      $(document).ready(function () {
          $('#myCarousel').carousel({
              interval: 10000
          })
          $('.carousel .item').each(function () {
              var next = $(this).next();
              if (!next.length) {
                  next = $(this).siblings(':first');
              }
              next.children(':first-child').clone().appendTo($(this));
              if (next.next().length &gt; 0) {
                  next.next().children(':first-child').clone().appendTo($(this));
              } else {
                  $(this).siblings(':first').children(':first-child').clone().appendTo($(this));                  
              }
          });
      });
  &lt;/script&gt;
  
  &lt;style&gt;
      .carousel {
          overflow: hidden;
      }
      .carousel-inner {
          width: 150%;
          left: -25%;
      }
      .carousel-inner &gt; .item.next,
      .carousel-inner &gt; .item.active.right {
          left: 0;
          -webkit-transform: translate3d(33%, 0, 0);
          transform: translate3d(33%, 0, 0);  
      }
      .carousel-inner &gt; .item.prev,
      .carousel-inner &gt; .item.active.left {
          left: 0;
          -webkit-transform: translate3d(-33%, 0, 0);
          transform: translate3d(-33%, 0, 0); 
      }
      .carousel-control.left, .carousel-control.right {
          background: rgba(255, 255, 255, 0.3);
          width: 25%;
      }
  &lt;/style&gt;
  </code></pre>