Search code examples
csssasseffect

Hover effect in circle border

can someone help me to do this hover effect

  • it is a normal circle
  • and when passing over it I would like it to look that way and even for the circle to rotate

Thanks in advance Hover effect

Solution

  • If I understand you correctly, here is one way you could make this work.

    There are 3 elements to this; the image, the circle and the gap.

    • The circle is a div with a border-radius to round it out, and a border with the color of your choice.
    • The gap is a div that is the full height of the wrapper and the width of the intended gap. The div is given the same color as the background (white in this case - change to whatever you want). Then we apply a transform of -30deg to get the angle in your example.
    • The image is a div with a border-radius and is positioned in the middle of the wrapper.

    The css then makes use of keyframes to add an animation to the gap div to make it rotate when you hover over the wrapper. This gives the illusion of the circle rotating.

    .wrapper {
  position: relative;
  height: 350px;
  width: 350px;
}

.wrapper .circle {
  position: absolute;
  height: 340px;
  width: 340px;
  border: 5px solid #00C17F;
  border-radius: 50%;
}

.wrapper .gap {
  position: absolute;
  width: 100px;
  height: 350px;
  left: 125px;
  background: white;
  -ms-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.wrapper:hover .gap {
  display: block;
  -webkit-animation: rotateCircle 20s linear infinite;
  -moz-animation: rotateCircle 20s linear infinite;
  -ms-animation: rotateCircle 20s linear infinite;
  -o-animation: rotateCircle 20s linear infinite;
  animation: rotateCircle 20s linear infinite;
}

.wrapper .image {
  position: absolute;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/f/f2/Light_Work_%28Unsplash%29.jpg");
  background-size: cover;
  background-position: right;
  border-radius: 50%;
  top: 10%;
  left: 10%;
  height: 80%;
  width: 80%;
}

@keyframes rotateCircle {
  from {
    -ms-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }

  to {
    -ms-transform: rotate(330deg);
    -moz-transform: rotate(330deg);
    -webkit-transform: rotate(330deg);
    -o-transform: rotate(330deg);
    transform: rotate(330deg);
  }
}
    <div class="wrapper">
  <div class="circle"></div>
  <div class="gap"></div>
  <div class="image"></div>
</div>