Actually, I am looking for a hand-drawn pencil circle hover effect using pure CSS without using SVG. Like this one on CodeMyUi. But this was achieved using an SVG I want to create it using only pure CSS. Please if anybody knows this answer me.
Asked
Active
Viewed 1,159 times
-2
-
no way with pure CSS. Either the mentioned SVG or a PNG as background. Clip-path could be used but would be super close to a SVG and very hacky to beginn with. With that efford you coul use a svg in the first palce. – tacoshy Jul 04 '21 at 18:17
-
Please can you help me out with this we can use an image as a background but not SVG this is requirement?Please if you can do this let me know how to do this. – Adil Mughal Jul 05 '21 at 14:35
1 Answers
2
Perhaps you could try something like this?
.circle-on-hover {
padding: 16px;
position: relative;
display: inline-block;
margin: 16px;
}
.circle-on-hover:hover:after {
position: absolute;
width: 100%;
height: 100%;
border: 3px solid blue;
content: '';
top: 0;
left: 0;
border-radius: 100px 50px 150px;
transform: rotate(-5deg);
}<div class="circle-on-hover">Lorem ipsum</div>You could fiddle with the border-radius and rotation to change the effect, and maybe add :before to get the cross-over in the top right?
Hope this points you in the right direction - please let me know :-)
Cristian Ciupitu
- 20,270
- 7
- 50
- 76
Kate
- 176
- 5
-
Yeah Kate this is an amazing try but my client wants exactly the same thing. Is it possible with the pure CSS if not please tell me another way other than SVG may be an image or something like this but please help me out. – Adil Mughal Jul 05 '21 at 13:10
-
Can we achieve this task using background image. If we can please let me know how to do this? – Adil Mughal Jul 05 '21 at 14:33
-
The requirement is changed i only want a hand drawn circle like i showed not hover effect just a hand-drawn circle. – Adil Mughal Jul 06 '21 at 11:53
-
-
-