Flexslider with zoom/scale animation

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link data-require="Flexslider@2.6.4" data-semver="2.6.4" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/flexslider.min.css" />
  <script data-require="Flexslider@2.6.4" data-semver="2.6.4" src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/jquery.flexslider-min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <h1>Flexslider Demo</h1>
  <h2>with zoom/scale transition effect</h2>
  <p>Requirements:</p>
  <ol>
   <li>Image should always cover the background of the container (Fullsize Background)</li>
   <li>Other elements (h1) should not be part of the transition</li>
  </ol>
  <div class="flexslider">
    <ul class="slides">
      <li>
        <div class="bgimg" style="background-image: url(http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg)"></div>
        <h1>Image #1</h1>
      </li>
      <li>
        <div class="bgimg" style="background-image: url(http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg)"></div>
        <h1>Image #2</h1>
      </li>
      <li>
        <div class="bgimg" style="background-image: url(http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg)"></div>
        <h1>Image #3</h1>
      </li>
    </ul>
  </div>
</body>

</html>

// Code goes here

$(document).ready(function() {
  $('.flexslider').flexslider({
    animation: "fade", // fade, slide, ...
    slideshowSpeed: 4000,
    animationSpeed: 1000,
    controlNav: false,
    pauseOnAction: false,
  });
})

/* Styles go here */

.flexslider {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.flexslider .slides {
  height: 100%;
}

.flexslider .slides li {
 height: 100%;
 position: relative;
}

.flexslider .slides li h1 {
  position: absolute;
  z-index:9;
  top: 30px;
  left: 25%;
  width: 50%;
  text-align:center;
  text-shadow: 1px 1px 1px #fff;
}

.flexslider .slides li .bgimg {
  background-position: center;
  height: 100%;
  width: 100%;
  transition: transform 4s ease-in-out;
  -webkit-backface-visibility: hidden;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 1;
}

.flexslider .slides li.flex-active-slide .bgimg {
  transform: scale(1.2);
}