Hover effect in circle border - css

Question

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

Answer 1

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>

Answer 2

You can have just one HTML element. But you need 3 layers:
holds the green circle
holds the image
creates the gaps by overwriting part of the circle
Layer 3 can also be made to rotate on hover.
CSS allows you to attach before and after pseudo elements to elements such as divs (not to normal img elements though, hence we use a div).
This way we have our 3 layers. We use the div itself to display the green circle and above it (in z-index terms) we place a pseudo element which creates the gaps by having a conic gradient background image. This only turns up when the user hovers. The other pseudo element holds the image with z-index set so it is above the others and doesn't get affected by the rotating conic gradient.
Note that all units used here are relative so the code is responsive.
.circle {
--gap: 30deg; /* set this to what you want the gap to be */
--border: 2px; /* set this to what you want the width of the green in the border to be can be in vmin for example for full responsiveness */
position: relative;
border: solid green var(--border);
border-radius: 50%;
width: 50vmin;
height: 50vmin;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.circle::before, .circle::after {
content: '';
border-radius: 50%;
position: absolute;
margin: 0;
padding: 0;
}
.circle::after {
/* position and center the image */
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 70%;
height: 70%;
background-image: url(https://picsum.photos/id/0/400/400);
background-size: cover;
border-radius: 50%;
border-style: solid;
z-index: 2;
}
.circle:hover::before {
width: calc(100% + (3 * var(--border)));/* make it slightly bigger to make sure a 'stray' screen pixel does not get left out when the system converts part CSS px to screen pixels */
height: calc(100% + (3 * var(--border)));
top: calc(-1.5 * var(--border));
left: calc(-1.5 * var(--border));
z-index: 1;
background-image: conic-gradient(white 0deg, white var(--gap), transparent var(--gap), transparent 180deg, white 180deg, white calc(180deg + var(--gap)), transparent calc(180deg + var(--gap)), transparent 360deg);
animation: rotate 2s infinite linear;
}
#keyframes rotate {
to {
transform: rotate(360deg);
}
}
<div class="circle"></div>