title: How to make a css transition from background size cover to 105% 105%?
body: <p>In css3, I have this</p>
  <p><a href="https://codepen.io/sneaky666/pen/poyxxZY" rel="nofollow noreferrer">https://codepen.io/sneaky666/pen/poyxxZY</a></p>
  <pre><code>&lt;div id=&quot;pic&quot;&gt;
    
  &lt;/div&gt;
  </code></pre>
  <p>css</p>
  <pre><code>#pic {
    background-image:url('https://images.unsplash.com/photo-1542362567-b07e54358753?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;w=1000&amp;q=80');
    width:200px;
    height:200px;
    /*background-size:cover;*/
    background-position: center;
    background-size:100% 100%;
    transition: background-size 0.5s;
  }
  #pic:hover {
      background-size:105% 105%;
  }
  </code></pre>
  <p>And this scales the BG size from 100% to 105% which looks nice. However I want the initial size to be <code>cover</code>. But if I do that, it doesn't smoothly transition from <code>cover</code> to <code>105% 105%</code>. How can I still do this?</p>
  <p>Thanks</p>