<div class="out">
<div class="one"              
                onmouseover="document.getElementById('block').style.display = 'block';"
                onmouseout="document.getElementById('block').style.display = 'none';"">
</div>
  <div class="line-g line-gr"></div>
  <div class="line-v line-gr"></div>          
</div>
<div class="two" id="block"></div>

.one{
  width: 150px;
  height: 150px;
  background-color: red;
}
.two{
  display: none;
  position: absolute;
  top: 10px;
  left: 300px;
  width: 150px;
  height: 150px;
  background-color: blue;
}
.line-g{
    top: 50px;
    cursor: crosshair;
    position: absolute;
    left: 0px;
    width: 100%;
    height: 10px;
    background-color: rgb(0, 0, 255);
  }

.line-v{
    left: 50px;
    cursor: crosshair;
    position: absolute;
    top: 0px;
    width: 10px;
    height: 100%;
    background-color: rgb(0, 0, 255);
  }
  .line-gr{
    background: repeating-linear-gradient(
     45deg,
     #DDD,
     #DDD 7px,
     #222 7px,
     #222 14px
     );
  }