constellation css

/* paste this section between < style > and < /style > */

.constellation {
  position: absolute;}

.hot-spot {
  background-color: #222; /* change the circle background color */
  border-radius: 20px;
  color: #fff;
  padding: 5px;
  position: absolute;
  text-align: center;
  font-size:10px;
  line-height:10px;
  width: 10px;
  height: 10px;
  border: 1px solid #fff;} /* change the sthe circle border color */

.hot-spot:hover {
  background-color: #666;  /* change the circle hover color */
  -webkit-transition: 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;}

.hot-spot:hover .boxstuff {
  display:block;
  opacity:0.8;}

/* change the 'star' positions here by altering the top and left values, you can add more stars if you like and this is where you would set the position of them */

.star1 {
  top: 30px;
  left: 20px}

.star2 {
  top: 60px;
  left: 80px;}

.star3 {
  top: 100px;
  left: 60px;}

.star4 {
  top: 120px;
  left: 30px;}

.star5 {
  top: 150px;
  left: 80px;}

.boxstuff {
  background-color: #222;  /* change the hover box background colour */
  border: 1px solid #fff;  /* change the hover box border color */
  color: #fff;  /* change the hover box text color */
  display:none;
  padding: 10px;
  position: absolute;
  font-size:11px;  /* change the hover box font-size here */
  top: 13px;
  left:13px;
  width: 200px;
  z-index: 10;}