Estoy haciendo una border animado con CSS que aparece de arriba hacia abajo y el problema que tengo es que la parte superior y derecha aparecen detrás de la imagen, mientras que la parte inferior e izquierda delante de la imagen
¿Cómo podria hacer para que tanto la superior como la parte derecha aparezcan adelante de la imagen?
/*****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>
:before
), ese elemento está por detrás, mientras que el pseudo-elemento "después" (:after
) acaba por encima. La solución es jugar con el z-index, por ejemplo añadiendoz-index: -1
a la imagen, para que los bordes estén por encima