3

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 introducir la descripción de la imagen aquí

¿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>

1
  • Creo que lo que pasa es lo siguiente: cuando se renderizan en pantalla los componentes, el orden de posicionamiento es el mismo orden de la jerarquía, por tanto se aparece el div y luego la imagen... pero puesto que el el div tiene un pseudo-elemento "antes" (: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ñadiendo z-index: -1 a la imagen, para que los bordes estén por encima Commented el 11 nov. 2022 a las 16:54

1 respuesta 1

6

Simplemente es ponerle un z-index a ::before y ::after junto con la posición absoluta.

Además como una opción mejorada, el contenedor padre hovereffect debe tener las medidas fijas y no la imágen (la imágen debe ser 100%). Porque todo está en el padre.

/*****CSS*******/
.hovereffect {
  overflow: hidden;
  position: absolute;
  width: 400px
}

.hovereffect img {
  display: block;
  position: relative;
  width: 100%;
  border-radius: 50px;
}

.hovereffect::before, .hovereffect::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  z-index: 1;
  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>

2
  • 1
    Tú has aumentado el z-index de los bordes, yo he disminuido el de la imagen. No me di cuenta de tu respuesta mientras miraba el comportamiento sin z-index para añadir mi comentario. Borraré mi respuesta y dejaré la explicación como comentario Commented el 11 nov. 2022 a las 16:50
  • Si @PabloLozano el trabajo es con el before y after y a estos es que se debe. Esta bien Commented el 11 nov. 2022 a las 16:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.