slick.jsの左右画像の上から網画像を表示したい

###前提・実現したいこと
現在HPのコーディング中で、スライダーにslick.jsを使用しております。
centerMode: true,
で左右に前後の画像を表示しているのですが
その画像上に半透明化した網画像を表示させたいです。

どのように画像上に表示していいかわからず
ご教授いただけたら幸いです。

下記のコードで表示しており、
.main-slider .slick-slide:not(.slick-center) にて
左右の画像のみにCSSをかける事まではわかったのですが
表示されている左右画像の上に別の画像を表示する方法がわかりません。

backgroundでは画像の下になってしまいますよね…

CSSにて設定可能なのか、javascriptになるのかがわかりません。

宜しくお願い致します。

<link rel="stylesheet" type="text/css" href="./css/slick.css">
<link rel="stylesheet" type="text/css" href="./css/slick-theme.css">
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .slider {
    width: 90%;
    margin: 0 auto 80px;
  }
  .slick-slide img {
    width: 100%;
    height: auto;
  }
  .main-slider{
    width: 100%;
  }
  .main-slider .slick-slide{
    margin: 5px;
  }

</style>

<div class="main-visual">
  <div class="slider main-slider">
    <div><a href="#"><img src="img/slider/01.jpg"></a></div>
    <div><a href="#"><img src="img/slider/02.jpg"></a></div>
    <div><a href="#"><img src="img/slider/03.jpg"></a></div>
    <div><a href="#"><img src="img/slider/04.jpg"></a></div>
    <div><a href="#"><img src="img/slider/05.jpg"></a></div>
    <div><a href="#"><img src="img/slider/06.jpg"></a></div>
  </div>
</div>

<!-- Javascript -->
<script src="js/jquery-3.2.1.min.js"></script> 
<script src="js/slick.min.js"></script>
<script>
$("document").ready(function(){
  $('.main-slider').slick({
    autoplay: true,
	autoplaySpeed: 5000,
	arrows: false,
	infinite: true,
	dots: true,
    centerMode: true,
    centerPadding: '20%'
  });
}); 
</script>