Estoy haciendo una borderborder animado con CSS que aparece de arriba hacia abajo y el problema quque tengo es que la parte superior y derecha aparecen detrasdetrás de la imagen pero, mientras que la parte de inferior ye izquierda adelantedelante de la imagen
Como¿Cómo podria hacer para que tanto la superior como la parte derecha aparezcan adelante de la imagen la animacion que utilize para hacer eso fue un codigo que era para el border de un texto y lo trate de adaptar pero me surge ese problema como se puede solucionar eso:?
/*****CSS*******/
.hovereffect {
overflow: hidden;
position: absolute;
}
.hovereffect img {
display: block;
position: relative;
width: 400px;
border-radius: 50px;
}
.hovereffect::before, .hovereffect::after {
content: '';
box-sizing: border-box;
position: absolute;
border: 6px solid transparent;
width: 0;
height: 0;
}
.hovereffect::before {
top: 0;
left: 0;
border-top-color: #F87600;
border-right-color: #F87600;
animation: border 2s infinite;
}
.hovereffect::after {
bottom: 0;
right: 0;
animation: border 2s 1s infinite, borderColor 2s 1s infinite;
}
@keyframes border {
0% {
width: 0;
height: 0;
}
25% {
width: 100%;
height: 0;
}
50% {
width: 100%;
height: 100%;
}
100% {
width: 100%;
height: 100%;
}
}
@keyframes borderColor {
0% {
border-bottom-color: #F87600;
border-left-color: #F87600;
}
50% {
border-bottom-color: #F87600;
border-left-color: #F87600;
}
51% {
border-bottom-color: transparent;
border-left-color: transparent;
}
100% {
border-bottom-color: transparent;
border-left-color: transparent;
}
}
<div class="hovereffect">
<img class="img-responsive" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/austin-fireworks.jpg" alt="">
</div>