Map Image with Easy Dots and Titles using only CSS

HTML

<div class='map-wrap'>
  <div class='map-dot map-dot-1'>
    <div class='dot-content'>
      KruXoR 1
    </div>
  </div>
  <div class='map-dot map-dot-2'>
    <div class='dot-content'>
      KruXoR 2
    </div>
  </div>
</div>

CSS

.map-wrap * {
	font-family:sans-serif;
}
.map-wrap {
	background:url(https://i.imgur.com/qHVGYKx.jpeg) center no-repeat;
	background-size:cover;
	height:500px;
	width:800px;
	margin:0 auto;
	position:relative;
}
.map-dot:hover .dot-content {
  display:block!important;
}
.dot-content {
  background:rgba(255,255,255,0.8);
  padding:10px;
  border-radius:10px;
  box-shadow:1px 1px 10px rgba(0,0,0,0.3);
  min-width:150px;
  font-size:14px;
  text-align:center;
	display:none;
	font-weight:bold;
  color:#444;
}
.map-dot:hover {
  background:rgba(255,255,255,0.0);
}
.map-dot {
  background:rgba(255,255,255,0.5);
  border-radius:20px;
	height:30px;
	width:30px;
	position:absolute;
}
.map-dot-1 {
	top:374px;
	left:212px;
}
.map-dot-2 {
	top:10%;
	left:10%;
}