I'm working on creating a circle with just a border (no background) that scales on hover. Here's the code I have so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<style>
#circle{
border: 1px solid black;
width: 40px;
height: 40px;
border-radius: 50%;
margin: 20% auto;
transition: all 0.5s ease;
}
#circle:hover{
cursor: pointer;
transform: scale(6);
border: 1px solid black;
transition: all 0.5s ease;
}
</style>
</head>
<body>
<div id="circle">
</div>
</body>
</html>
Check out this Fiddle for a live demo: https://jsfiddle.net/u36nfxs0/2/
The issue I'm facing is that when I hover over the circle, not only does the circle scale up, but the border width scales as well. Is there a way to prevent the border width from scaling along with the circle?
Thank you in advance!