LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Marcello Africano

Border bounce effect on hover

CSS
/* Variables */
/* Styles */
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
body, html {
  background: WhiteSmoke;
  font-family: 'Ubuntu', sans-serif;
  color: #0f383e;
  text-align: center;
}
body h1, html h1 {
  font-size: 1.2rem;
  font-weight: bold;
}
body p, html p {
  font-size: 0.95rem;
}
body .holder, html .holder {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -110px;
  margin-top: -185px;
}
body .holder .avatar, html .holder .avatar {
  margin: 25px auto;
}
body .holder .avatar img.user, html .holder .avatar img.user {
  height: 200px;
  width: 200px;
  background-color: #f66;
  box-shadow: 0 0 0 5px #f66;
  border-radius: 50%;
}
body .holder .avatar img.user:hover, html .holder .avatar img.user:hover {
  cursor: pointer;
  animation: bounceOut .4s linear;
}

@keyframes bounceOut {
  0% {
    box-shadow: 0 0 0 4px #f66;
    opacity: 1;
  }
  25% {
    box-shadow: 0 0 0 1px #f66;
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 7px #f66;
    opacity: 1;
  }
  75% {
    box-shadow: 0 0 0 4px #f66;
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 0 5px #f66;
    opacity: 1;
  }
}
Host Instantly Drag and Drop Website Builder

 

Description

When you hove the image, the border bounces.
Term
Mon, 11/27/2017 - 21:33

Related Codes

Pen ID
Pen ID
Pen ID