Rafaela Bennett Rafaela Bennett - 11 days ago 7
CSS Question

How to space a border or how to circle a circle

Expected result on hover:

[Expected Result Image]



#bolinhas {
background: #e2e2dc;
position: relative;
float: left;
width: 10vh;
height: 10vh;
border-radius: 50%;
border-collapse: separate; /* doesnt work ? */
border-spacing: 10px 50px; /* doesnt work ? */
}
#espaco {
background: invisible;
position: relative;
float: left;
left: 45%;
top: 35%;
width: 10vh;
height: 10vh;
-moz-border-radius: 10vh;
-webkit-border-radius: 10vh;
border-radius: 10vh;
}
#bolinhas:hover {
height: 20vh;
width: 20vh;
background-color: invisible;
border: 1px solid #555;
border-radius: 50%;
}
#borda:hover {
height: 20vh;
width: 20vh;
background-color: invisible;
border: 1px solid #555;
border-radius: 50%;
}

<div id="divbolinhas">

<div id="espaco">
</div>
<div id="borda">
<div id="bolinhas">
</div>
</div>
<div id="espaco">
</div>
<div id="bolinhas">
</div>
<div id="espaco">
</div>
<div id="bolinhas">
</div>
<div id="espaco">
</div>
</div>

<p>
<br>
<br>
<br>
<br>what i'm trying to do:
<img src="http://unasus.ufcspa.edu.br/cidadesvirtuais/rafaela/img/leiamais/circleacircle.png">
</p>








jsFiddle



I've been searching neater ways to circle a circle but well. As you can see I'm not doing all right. Maybe someone knows. Any help will be most welcome.

Answer

You can use SVG <circle> elements along with the adjacent sibling selector for the hover state.

body {
  height: 100vh;
  margin: 0;
  display: flex;
}
svg {
  flex: 1;
}
.circle--inner {
  color: #E7E7DC;
}
.circle--outer {
  color: #868780;
  opacity: 0;
}
.circle--inner:hover + .circle--outer {
  opacity: 1;
}
<svg class="circle-container" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle class="circle circle--inner" cx="50%" cy="50%" r="40" stroke-width="8" fill="currentColor" stroke="currentColor" />
  <circle class="circle circle--outer" cx="50%" cy="50%" r="52" stroke="currentColor" stroke-width="6" fill="none" />
</svg>


Or if you prefer using a pseudo-element:

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle {
  width:96px;
  height: 96px;
  border-radius: 50%;
  margin: calc(104px - 96px); /* Pseudo-element overflow */
  background-color: #E7E7DC;
  position: relative;
}
.circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid #868780;
  border-radius: inherit;
  width: 104px;
  height: 104px;
  opacity: 0;
}
.circle:hover::after {
  opacity: 1;
}
<div class="circle"></div>


The first approach is more semantic and actually triggers the 'border' hovering the circle, not the bounding box.