title: Cards in html and css leaving behind small lines
body: <p>Im playing around with transform/transitions in css. I used transform:scale to enlarge a card as i hovered over it. It works, but once it returns to its regular size, it leaves behind small lines behind. In the image it can be seen on the top right, and bottom right cards. I don't know whether it is the browser or what i wrote.</p>
  <p>Any help is appreciated<img src="https://i.stack.imgur.com/hkyhM.jpg" alt="enter image description here" /></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.card {
  
    background-color: #ffffff;
    color: #000000;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: 5px;
    flex: 1 0 350px;
    min-height: 350px;
    max-width: 450px;
    overflow: hidden;
    font-size: 1rem;
  
    transition:transform  600ms linear;
  
  
  }
  
  .card:hover{
    transform:scale(1.07,1.07);</code></pre>
  </div>
  </div>
  </p>