CSS - 如何删除图像上悬停的元素和蓝色边框之间的细白线

Question

这是我的结构：

<div class="parent">
<a href="#">
  <p class="carousel_img">
    <span class="img"></span>   
    Some text
  </p>
</a>

这是我的风格：

.parent{
  height: 270px;
  width: 270px;
}
.img {
    background-image: url(http://frontendtest.ru/anit/img/ps_3.jpg);
    background-size: cover;
    display: block;
    height: 250px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    background-repeat: no-repeat;
}
.carousel_img {
    border-radius: 50%;
    border: 4px solid #f6e9d6;
    height: 260px;
    width: 260px;
    overflow: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
    margin: 0 auto;
}
a:hover .carousel_img {
    border-color: #2e8ce4;
}
.carousel_img:before {
    height: 15px;
    width: 15px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin: auto;
    bottom: 20px;
    z-index: 2;
}
.carousel_img:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    display: none;
}
.carousel_img:after {
    bottom: 0;
    height: 56px;
    background: #2e8ce4;
}
a:hover .carousel_img:before, a:hover .carousel_img:after {
    display: block;
}

在Chrome，Firefox，Edge中我们可以看到蓝色之间的细白线：在图片底部的元素和蓝色边框之后我们：将鼠标悬停在图像上。这是我的笔http://codepen.io/DmitryShutov/pen/JKovYb上的链接。 如何去除细白线？