title: Transform scale Image using window scroll
body: <p>My opacity style is fired when scrolling down the page, however my transform scale is not. Any thoughts on how to solve this one or what I am missing?</p>
  
  <p><strong>Codepen:</strong>
  <a href="https://codepen.io/anon/pen/wyrBLE" rel="nofollow noreferrer">https://codepen.io/anon/pen/wyrBLE</a></p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="top"&gt;&lt;div class="title"&gt;Fade out&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Scss:</p>
  
  <pre><code>.top {
    margin: 0;
    position: relative;
    width: 100%;
    height: 400px;
    opacity: 1;
    text-align: center;
    font-family: 'helvetica';
    font-size: 80px;
    font-weight: 100;
    color: #fff;
    background: url("http://via.placeholder.com/350x150");
    background-position:center;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  
  .title {
    position: absolute;
    top: 60%;
    left: 100px;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(window).scroll(function(){
    $(".top").css({
    'opacity' : 1 - $(window).scrollTop() / 250,
    'transform': 'scale(1.5)' - $(window).scrollTop() / 250
    });
  });
  </code></pre>