如何更改图像上的多色叠加？

Question

我正在尝试更改此设置，以便将鼠标悬停在图像上时颜色会多次更改。我无法获得颜色来响应CSS中的不透明度，并且我的图像没有显示。我将不透明度设置为0.9，颜色仍然显示为粗体。最终，我想将其更改为仅更改颜色的云而不是整个照片。

var nopics = 12;
    var partitionsMultiplier = new Array();
    var partitionsWidth = new Array();
        for (var i = 0; i < nopics; i++) {

            if (i == 0) partitionsMultiplier[i] = 1 / nopics;
            else partitionsMultiplier[i] = partitionsMultiplier[i-1] + (1 / nopics);
            partitionsWidth[i] = (partitionsMultiplier[i]) * (document.getElementById('dd1').offsetWidth);
        }
    
    $('body').mousemove(function (e) {
        var left1 = e.pageX - $('#dd1').offset().left;
        var top1 = e.pageY - $('#dd1').offset().top;

        var str = $('#dd1').attr("class").toString().split(" ");
        
        
        
       switch(true)
       {
           case (left1 < partitionsWidth[0]): $('#dd1').switchClass(str[1], "s1"); break;
           case (left1 < partitionsWidth[1]): $('#dd1').switchClass(str[1], "s2"); break;
           case (left1 < partitionsWidth[2]): $('#dd1').switchClass(str[1], "s3"); break;
           case (left1 < partitionsWidth[3]): $('#dd1').switchClass(str[1], "s4"); break;
           case (left1 < partitionsWidth[4]): $('#dd1').switchClass(str[1], "s5"); break;
           case (left1 < partitionsWidth[5]): $('#dd1').switchClass(str[1], "s6"); break;
           case (left1 < partitionsWidth[6]): $('#dd1').switchClass(str[1], "s7"); break;
           case (left1 < partitionsWidth[7]): $('#dd1').switchClass(str[1], "s8"); break;
           case (left1 < partitionsWidth[8]): $('#dd1').switchClass(str[1], "s9"); break;
           case (left1 < partitionsWidth[9]): $('#dd1').switchClass(str[1], "s10"); break;
           case (left1 < partitionsWidth[10]): $('#dd1').switchClass(str[1], "s11"); break;
           case (left1 < partitionsWidth[11]): $('#dd1').switchClass(str[1], "s12"); break;
       default:break;
       }
  
    });

.container {
  width: 100%;
height: 500px;
}

.slide {
  width: 100%;
height: 100%;
  display: block;

  background-image:url('https://vgy.me/0fBkdy.jpg');

  padding: 80px 0;

}


.s1 {
  background: #FFC0CB;
  opacity:0.9;
  z-index:-1;
}
.s2 {
  background: #FFB6C1;
  opacity:0.9;
  z-index:-1;
}
.s3 {
  background: #FF69B4;
  opacity:0.9;
  z-index:-1;
}
.s4 {
  background: #FF1493;
  opacity:0.9;
  z-index:-1;
}
.s5 {
  background: #DB7093;
  opacity:0.9;
  z-index:-1;
}
.s6 {
  background: #C71585;
  opacity:0.9;
  z-index:-1;
}
.s7 {
  background: #8B008B;
  opacity:0.9;
  z-index:-1;
}
.s8 {
  background: #9932CC;
  opacity:0.9;
  z-index:-1;
}
.s9 {
  background: #8B008B;
  opacity:0.9;
  z-index:-1;
}
.s10 {
  background: #9370DB;
  opacity:0.9;
  z-index:-1;
}
.s11 {
  background: #FF00FF;
  opacity:0.9;
  z-index:-1;
}
.s12 {
  background: #EE82EE;
  opacity:0.9;
  z-index:-1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
			  src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
			  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
			  crossorigin="anonymous"></script>
<div class="container">
  <div id="dd1" class="slide s1"></div>
</div>