Eliaslog.pw

Example Gif of the border animation

In this short snippet we’ll be diving into a recreation of the hovering effect that the fairly recent redesign of the twitch.tv profilepages brought with them. On hover, they let a gradient color travel around the border of the rounded image. Just hit up an ongoing livestream and have a look!

To do this with the css-border property isnt really optimal, but with litte to no effort you can achieve this effect:

The Markup is really simple.

<div class="wrapper">
  <div class="bg"></div>
  <div class="image">
    <img
      src="https://static-cdn.jtvnw.net/jtv_user_pictures/crendor-profile_image-278c88d14522cb09-70x70.png"
    />
  </div>
</div>

All we have is a .wrapper that holds it together, an .bg (background) that will be the place to hold the gradient, and the .img-div with the actual profile image. Note that the background and the image aren’t nested.

Onto the (S)CSS!

The base

.wrapper {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 500px;
  position: relative;
}

First we set the wrapper up and all we’re really doing here is to set a width and height, making it relative to its children and using flexbox to center all the childs nice and quick. And we make it round with an high border-radius.

The border

.bg {
  background-image: radial-gradient(circle at bottom, #11854a 0, #a970ff);
  height: 100%;
  width: 100%;
  position: absolute;
}

The image

.image {
  background: black;
  width: 90%;
  height: 90%;
  border-radius: 500px;
  overflow: hidden;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 90%;
    height: 90%;
  }
}

The image spans only 90 % in width and height to leave room for the gradient, also we use flexbox-magic again to center the children, and border-radius combined with overflow: hidden to shave the image round.

The movement

Yeah it’s just an.. it’s one line of keyframes.

@keyframes turn {
  to {
    transform: rotate(1turn);
  }
}

The interactivity!

And then we put on a hover statement:

.wrapper:hover {
  .bg {
    animation: turn 2s infinite linear;
  }
}

Note how we sert the hover on the wrapper so that no matter where the cursor rests on the wrapper, it always enables the animation of the bg (but not on the image that stays stationary).

Aaaand that’s it! If you wanna play around with it, just fork my CodePen! Have a good one!

CodePen Embed

Klick below to show the CodePen as an embed. CodePen will set set several Cookies in your Browser.

CodePen.io Privacy Policy

The creation of this post was made possible by coffee.
Buy me a coffee