Appearance of border not reported

Question

var images = $("[data-img]");
images.mouseenter(function() {
  $(this.dataset.img).css('box-shadow', "inset 0 0 20px black"); 
});
images.mouseout(function(){
  $(this.dataset.img).css('box-shadow', "");
});

h3 {
  margin-top: -21%;
  margin-left: 17%;
  font-weight: bold;
  color: #000000;
  font-size:1.5vw; 
  font-family: Chaparral Pro;
  float: left;
}

.img1 {
  background-image: url(t1.png) ;
  width: 15%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.img2 {
  background-image: url(t2.jpg) ;
  width: 15%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.img3 {
  background-image: url(t3.jpg) ;
  width: 15%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box first">
  <div >
    <img class="img1" data-img=".img1" >
  </div>
  <a href="t1.html"><h3 class="h1" data-img=".img1"> Aliens </h3></a>
  <div>
    <p></p>
  </div>
</div>
<div class="box second">
  <div>
    <img class="img2" data-img=".img2" >
  </div>
  <a href="a2.html"><h3 class="h2" data-img=".img2"> Day of the Dead </h3></a>
  <p></p>
</div>
<div class="box third">
  <div>
    <img class="img3" data-img=".img3" >
  </div>
  <a href="a3.html"><h3 class="h3" data-img=".img3"> Evil dead </h3></a>
  <p></p>
</div>

Everything is going well, but the images show a white border around it. I don’t know why she’s showing up because she’s nowhere declared to be and I don’t intend for her to show up.