Hidden Border Mousemove

by Nabaraj Saha

HTML

<div class="row">
  <div class="container flexContainer">
  <div class="col col-1">1</div>
  <div class="col col-2">2</div>
  <div class="col col-3">3</div>
  <div class="col col-4">4</div>
  <div class="col col-5">5</div>
  <div class="col col-6">6</div>
  <div class="col col-7">7</div>
  <div class="col col-8">8</div>
  <div class="col col-9">9</div>
  <div class="col col-10">10</div>
  <div class="col col-11">11</div>
  <div class="col col-12">12</div>
  <div class="col col-13">13</div>
  <div class="col col-14">14</div>
  <div class="col col-15">15</div>
  <div class="col col-16">16</div>
  <div class="col col-17">17</div>
  <div class="col col-18">18</div>
  <div class="col col-19">19</div>
  <div class="col col-20">20</div>
  <div class="col col-21">21</div>
  <div class="col col-22">22</div>
  <div class="col col-23">23</div>
  <div class="col col-24">24</div>
  <div class="col col-25">25</div>
  <div class="col col-26">26</div>
  <div class="col col-27">27</div>
  <div class="col col-28">28</div>
  <div class="col col-29">29</div>
  <div class="col col-30">30</div>
  </div>
  <div class="containerShadow flexContainer">
    <div class="col col-1"></div>
    <div class="col col-2"></div>
    <div class="col col-3"></div>
    <div class="col col-4"></div>
    <div class="col col-5"></div>
    <div class="col col-6"></div>
    <div class="col col-7"></div>
    <div class="col col-8"></div>
    <div class="col col-9"></div>
    <div class="col col-10"></div>
    <div class="col col-11"></div>
    <div class="col col-12"></div>
    <div class="col col-13"></div>
    <div class="col col-14"></div>
    <div class="col col-15"></div>
    <div class="col col-16"></div>
    <div class="col col-17"></div>
    <div class="col col-18"></div>
    <div class="col col-19"></div>
    <div class="col col-20"></div>
    <div class="col col-21"></div>
    <div class="col col-22"></div>
    <div class="col col-23"></div>
    <div class="col col-24"></div>
    <div class="col...

SCSS

.flexContainer{
  display:flex;
  max-width:400px;
  flex-wrap:wrap;
  .col{
    width:30px;
    height:30px;
    border:2px solid;
    align-items:center;
    justify-content:center;
    display:flex;
  }
  &.container{
    
  position:relative;
  z-index:3;
    .col{
      border-color:transparent;
      &:hover{
        border-color:red;
      }
    }
  }
  &.containerShadow{
    position:absolute;
    top:0;
    z-index:2;
  }
}
.row{
  position:relative;
  border:1px solid;
}
.shadow{
  background-color:#000000;
  position:absolute;
  width:100%;
  height:100%;
  mask-image: url(https://ibb.co/LpxYHxK);
  top:0;
}

JavaScript

/* $(".row").hover(function(){
  $(".mousePointer").text($(this).cientX());
}, function(){
  $(this).css({
    "border-color":"transparent"
  })
}) */
$(".row").mousemove(function(event){            
            var relX = event.pageX - $(this).offset().left;
            var relY = event.pageY - $(this).offset().top;
            var relBoxCoords = "(" + relX + "," + relY + ")";
            $(".mousePointer").text(relBoxCoords);
        })