CODEWITHSUNDEEP
htmlcss
P Bennett
P Bennett

Reputation: 103

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.

Upvotes: 1

Views: 56

Answers (2)

Ricky Ruiz
Ricky Ruiz

Reputation: 26751

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.

Upvotes: 3

caleb.breckon
caleb.breckon

Reputation: 1364

This is one way to do it. There are probably better ways.

revised jsfiddle

#circle {
  width: 200px;
  height: 200px;
  background: #e2e2dc;
  position: relative;
  border-radius: 999px;
  margin: 20px;
}
#circle:hover {
  box-shadow: 0 0 0 2pt white;
}
#circle:hover:after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: #555;
  z-index: -1;
  border-radius: 999px;
}
<div id="circle"></div>

Upvotes: 1

Related Questions