How do I get rid of this line showing for my hover effect animation?

Question

Update: I finally figured it out. I had to add overflow:hidden to the .services-cell:hover class.

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.

Here is a codepen https://codepen.io/designextras/pen/QWybXvR showing that little line. Even without the image showing it still shows when you hover over the shape.

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.

This is the HTML and CSS to create the effect:

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;
}

<div class="services-cell">
  <img class="services-cell_img" src="https://placehold.it/250x275" alt="">
  <div class="services-cell_text">Digital Marketing</div>
</div>

Answer 1

In .services-cell:hover, .services-cell_text { do not scale more than 1, so change the:

transform: scale(1.2);
to
transform: scale(1);

or if you want to keep the resize, add:

 overflow: hidden;