Skip to main content
se eliminaron 156 caracteres en el cuerpo; título editado
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

Problema con aminacionanimación de borderborde de una imagen

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

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>

Problema con aminacion de border de una imagen

Estoy haciendo una border animado con CSS que aparece de arriba hacia abajo el problema qu tengo es que la parte superior y derecha aparecen detras de la imagen pero la parte de inferior y izquierda adelante de la imagen introducir la descripción de la imagen aquí

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

Problema con animación de borde de una imagen

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>

Origen Enlace

Problema con aminacion de border de una imagen

Estoy haciendo una border animado con CSS que aparece de arriba hacia abajo el problema qu tengo es que la parte superior y derecha aparecen detras de la imagen pero la parte de inferior y izquierda adelante de la imagen introducir la descripción de la imagen aquí

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