title: How do I get rid of this line showing for my hover effect animation?
body: <p>Update: I finally figured it out. I had to add overflow:hidden to the .services-cell:hover class. </p>
  
  <p>So I have this white strip effect happening when I hover over an image, but it shows a little line going across the square border as I hover over the image, even though the shape is a polygon. So basically picture a white bar going across from the top right of the polygon to the bottom left. </p>
  
  <p>Here is a codepen <a href="https://codepen.io/designextras/pen/QWybXvR" rel="nofollow noreferrer">https://codepen.io/designextras/pen/QWybXvR</a> 
  showing that little line. Even without the image showing it still shows when you hover over the shape. </p>
  
  <p>I'm not sure how to get rid of that little line that shows once the bar reaches the bottom left of the image. Note it also shows the line at the top left corner as well when I hover over, so it seems like a little border line effect, but not sure what is going on.</p>
  
  <p><a href="https://i.stack.imgur.com/NAW1A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NAW1A.png" alt="enter image description here"></a></p>
  
  <p>This is the HTML and CSS to create the effect:</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>html, body {
    background: #222;
    display: flex;
    height: 100%;
    overflow: hidden;
    align-items: center;
    justify-content: center;
  }
  
  .services-cell:before {
    content: '';
    position: absolute;
    opacity: 0.4;
    width: 350px;
    height: 70px;
    background: white;
    top: 50;
    left: 0;
    z-index: 1;
    transform: rotate(45deg);
    transition: transform 0.5s;
  }
  
  .services-cell:hover:before {
    transform: translate(-100px, 600%) rotate(45deg);
    transition: transform 0.5s;
  }
  
  .services-cell {
    flex: 0 1 250px;
    max-width: 250px;
    height: 275px;
    margin: 2px 2px;
    position: relative;
    text-align: center;
    z-index: 1;
    box-shadow: 0px 0px 15px 0 rgba(0, 0, 0, 0.8);
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    cursor: pointer;
  }
  
  .services-cell_img {
    object-fit: cover;
    object-position: center;
  }
  
  .services-cell_text {
    height: 100%;
    width: 60%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    transition: opacity 350ms;
  }
   
  //This is the code that causes the lines
  .services-cell:hover {
  opacity: 1;
  transition: all 0.3s ease-in-out;
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  z-index: 99;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="services-cell"&gt;
    &lt;img class="services-cell_img" src="https://placehold.it/250x275" alt=""&gt;
    &lt;div class="services-cell_text"&gt;Digital Marketing&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>