title: How to add zoom effect to bootstrap carousel
body: <p>I am trying to add a zoom effect to a bootstrap carousel but I just can't seem to get it to trigger :(</p>
  
  <p>I believe that I may have to add the syntax to the core _carousel.scss file (or possibly not?).  So with this in mind, I have tried adding to the regular CSS file and also to the _carousel.scss file but with no joy. </p>
  
  <p>Can any fellow coders out there help, please? </p>
  
  <pre><code>.carousel-item {
    height: 100vh;
  }
  
  .carousel-image-1 {
    background: url("../img/image1.jpg");
    background-size: cover;
  }
  
  .carousel-image-2 {
    background: url("../img/image2.jpg");
    background-size: cover;
  }
  
  .carousel-image-3 {
    background: url("../img/image3.jpg");
    background-size: cover;
  }
  
  @-webkit-keyframes zoom {
   from {
    -webkit-transform: scale(1, 1);
   }
   to {
    -webkit-transform: scale(1.5, 1.5);
   }
  }
  
  @keyframes zoom {
   from {
    transform: scale(1, 1);
   }
   to {
    transform: scale(1.5, 1.5);
   }
  }
  
  .carousel-inner .carousel-item {
    -webkit-animation: zoom 5s;
    animation: zoom 5s;
  }
  
  &lt;section id="showcase"&gt;
  &lt;div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel"&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="carousel-item carousel-image-1 active"&gt;&lt;/div&gt;
      &lt;div class="carousel-item carousel-image-2"&gt;&lt;/div&gt;
      &lt;div class="carousel-item carousel-image-3"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>