覆盖除悬浮的div以外的整个屏幕

Question

当div（在本例中为面板）悬停时，我需要覆盖整个屏幕。类似于以下示例。问题是我需要在不使用JavaScript的情况下进行操作。知道如何吗？

$('.panel.panel-default').on('mouseenter', function() {
  $('.shadow').fadeIn('fast');
});
$('.panel.panel-default').on('mouseleave', function() {
  $('.shadow').fadeOut('fast');
})

.image-container {
  height: 200px;
  background-size: cover;
  background-position: center;
  margin-bottom: 15px;
  cursor: pointer;
}
.panel.panel-default {
  transition: 0.3s all;
}
.panel.panel-default:hover {
  box-shadow: 0px 3px 5px #9e9e9eb3;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.shadow {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #a1a1a1a1;
  z-index: 1;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="shadow"></div>
<div class="row">
  <div class="col-xs-6">
    <div class="panel panel-default">
      <div class="panel-body">
        <a href="http://wvwebi00153.intl.bns/projects">
          <div class="image-container" style="background-image: url('https://kbob.github.io/images/sample-4.jpg');"></div>
        </a>
        <div class="text-container">
          <center>
            <h4>Website 1</h4>
          </center>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque asperiores reprehenderit enim velit reiciendis hic est minus excepturi, incidunt dolorem pariatur adipisci odio blanditiis quidem, ipsum, quam tenetur id beatae.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="panel panel-default">
      <div class="panel-body">
        <a href="http://wvwebi00153.intl.bns/projects">
          <div class="image-container" style="background-image: url('https://kbob.github.io/images/sample-4.jpg');"></div>
        </a>
        <div class="text-container">
          <center>
            <h4>Website 2</h4>
          </center>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque asperiores reprehenderit enim velit reiciendis hic est minus excepturi, incidunt dolorem pariatur adipisci odio blanditiis quidem, ipsum, quam tenetur id beatae.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>