

.clock {
  width: 160px;
  height: 160px;
  border: solid 1px #aaa;
  border-radius: 50%;
  margin: 10px auto;
  position: relative;
  cursor: pointer;
background-image: url("back.jpg");
}


.dot {
  background: red;
  width: 10px;
  height: 10px;
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 5px);

}

.spire {
  position: absolute;
}

.sec {
  top: calc(50% - 78.75px);
  left: calc(50% - 1.25px);
  width: 2.5px;
  height: 80px;
  border-radius: 0 0 2.5px 2.5px;
  background: rgba(231, 76, 60, 1);
  z-index: 20;
  transform-origin: 1.25px 78.75px;
  transition: transform .5s ease;
}


.digit {
  position: relative;
  top: -140px;
  left: 1px;
margin-bottom:-42px;
  width: 160px;
  font: 36px Arial;
  color: #000;
  display: none;
  z-index: 30;
}

.clock:hover + .digit {
  display: block;
}

