<!--HTML-->

 <a href="#win1" class="map">Интерактивная карта</a>

   <a href="#x" class="overlay" id="win1"></a>
   <div class="popup">
<img src="https://forumstatic.ru/files/001a/ce/c2/39004.png">
<span class="pinit" style="top: 100px;left:50px"><pin></pin><em>текст текст текст</em></span>
<span class="pinit" style="top: 150px;left:200px"><pin></pin><em>еще точка с местом</em></span>
<span class="pinit" style="top: 180px;left:250px"><pin></pin><em>и еще одна точка с местом</em></span>
    <a class="close"title="Закрыть" href="#close"></a>
    </div>

<style>
a.map {
  font: 700 14px lora;
  text-transform: uppercase;
}

.overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: none;
    background-color: rgba(0, 0, 0, 0.65);
    position: fixed;
    cursor: default;
}

.overlay:target {
    display: block;
}

.popup {
    top: 13px !important;
    left: 50%;
    font-size: 14px;
    z-index: 20;
    margin: 0;
    width: auto;
    position: fixed;
    padding: 0;
	border: 6px solid;
border-image: url(https://forumstatic.ru/files/001a/ce/c2/19269.png) 6 round;
    box-shadow: 0 0 20px 0 rgba(0,0,0,.52);
    transform: translate(-50%, -500%);
    transition: transform 0.6s ease-out;
}
/* активируем модальный блок */
.overlay:target+.popup {
    transform: translate(-50%, 0);
    top: 20%;
}
/* формируем кнопку закрытия */
.close {
    top: -13px;
    right: -13px;
    width: 26px;
    height: 26px;
    position: absolute;
    padding: 0;
	background: #0c0e15;
	color: #8d7e48  !important;
    border-radius: 100%;
    text-align: center;
    text-decoration: none;
    font: 900 13px/26px montserrat !important;
    font-weight: bold;
    transition: all ease .8s;
   box-shadow: 0px 0px 0 1px #8d7e48, 0 0 0 2px #000;
	transition: all .5s ease-in-out 0s !important;
}
.close:before {
    content: "X";
    color: #8d7e48 
}
.close:hover {
    background: #252730;
    transform: rotate(360deg);    
    filter: brightness(1.4)
}

span.pinit {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

span.pinit pin {
      display: block;
  width: 11px;
  height: 11px;
  background: #0c0e15;
  border-radius: 100%;
  box-shadow: 0 0 0 2px #0c0e15 inset, 0 0 0 3px #7e724b inset, 0 0 0 1px #7a7664, 0 0 4px 0 rgba(0,0,0,.0)
}

span.pinit em {
  display: block;
  background: #17141d;
  box-shadow: 0 0 0 2px #1b1723 inset, 0 0 0 3px #443e2a inset, 0 0 5px 0px rgba(0,0,0,.5);
  border: 1px solid #443e2a;
  padding: 10px;
  color: #766E5A;
  text-shadow: 0 0 1px #111;
  min-width: 50px;
  font: 600 normal 9px/150% montserrat !important;
  position: absolute;
  top: 13px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    transform-origin: top;
    text-align: center;
      transition: all .7s cubic-bezier(.64,.51,.55,1.46) 0s;
    visibility: hidden;
    opacity: 0;
    z-index: 9
}

span.pinit:hover, span.pinit:active {
    cursor: pointer
}

span.pinit:hover em,span.pinit:active em {
    visibility: visible;
    top: 13px;
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.popup img {
    filter: sepia(100%) grayscale(60%) brightness(.7) contrast(1.8)
}
</style>