hoverの適用範囲がうまくいかない

前提

HtML, CSS, javaScriptでWebページを作っています。以下の画像のようにカーソルすると緑色の色がつくようにしたいのですが、右の3つのBoxのimgの部分が適用されません。どこを変更したらいいでしょうか？よろしくお願いします。

該当のソースコード

20220725.html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>複数モーダル</title>
7    <!--<link href="/common/css/import.css" rel="stylesheet">-->
8    <link href="assets/css/multipleModal.css" rel="stylesheet">
9    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
10    <script>
11      // モーダルが複数ある場合
12      $(function () {
13      
14        // モーダルのボタンをクリックした時
15        $('.modal_trigger .modal_btn').on('click', function() {
16          var btnIndex = $(this).index(); // 何番目のモーダルボタンかを取得
17          $('.modal_area .modal_box').eq(btnIndex).fadeIn(); // クリックしたモーダルボタンと同じ番目のモーダルを表示する
18        });
19      
20        // ×やモーダルの背景をクリックした時
21        $('.modal_close , .modal_bg').click(function(){
22          $('.modal_box').fadeOut(); // モーダルを非表示にする
23        });
24      });
25      
26    </script>
27  </head>
28  <body>
29    <div class="inner">
30      <ul class="modal_trigger">
31        <li class="modal_btn" id="matsuda">
32            <img src="assets/img/matsuda_cx5.png">
33            <div class="upper_modal">
34              <div class="modal_txt">
35                <p>マツダ</p>
36                <p>CX-5 CD(4WD)</p>  
37              </div>
38              <div class="favorite">
39                <div class="favorite_txt">
40                  <p>お気に入りに</p>
41                  <p>追加</p> 
42                </div>
43                <div class="heart">
44                  <input type="checkbox" checked id="1" name="heart"><label for="1"></label>
45                </div>
46              </div>
47            </div> 
48            <div class="detail-button">
49                <a href="history.html"><span>詳細を見る</span><img src="assets/img/basicArrow_#cccccc.png" alt=">"/></a>
50            </div>
51        </li>
52        <li class="modal_btn" id="toyota">
53            <img src="assets/img/9_38_1_030.png">
54            <div class="upper_modal">
55              <div class="modal_txt">
56                <p>トヨタ</p>
57                <p>アルファードハイブリッド</p>  
58              </div>
59              <div class="favorite">
60                <div class="favorite_txt">
61                  <p>お気に入りに</p>
62                  <p>追加</p> 
63                </div>
64                <div class="heart">
65                  <input type="checkbox" checked id="2" name="heart"><label for="2"></label>
66                </div>
67              </div>
68            </div> 
69            <div class="detail-button">
70                <a href="history.html"><span>詳細を見る</span><img src="assets/img/basicArrow_#cccccc.png" alt=">"/></a>
71            </div>  
72        </li>
73      </ul>
74      <div class="modal_area">
75        <div class="modal_box">
76          <div class="modal_bg"></div>
77          <div class="modal_inner">
78            <div class="modal_block">
79              <ul>
80                <li class="modal_btn" id="matsuda">
81                    <img src="assets/img/matsuda_cx5.png">
82                    <div class="upper_modal">
83                      <div class="modal_txt">
84                        <p>マツダ</p>
85                        <p>CX-5 CD(4WD)</p>  
86                      </div>
87                      <div class="favorite">
88                        <div class="favorite_txt">
89                          <p>お気に入りに</p>
90                          <p>追加</p> 
91                        </div>
92                        <div class="heart">
93                          <input type="checkbox" checked id="1" name="heart"><label for="1"></label>
94                        </div>
95                      </div>
96                    </div> 
97                    <div class="detail-button">
98                        <a href="history.html"><span>詳細を見る</span><img src="assets/img/basicArrow_#cccccc.png" alt=">"/></a>
99                    </div>
100                </li>
101              </ul>
102            </div>
103            <div class="modal_close">×</div>
104          </div>
105        </div>
106        <div class="modal_box">
107          <div class="modal_bg"></div>
108          <div class="modal_inner">
109            <div class="modal_block">
110              <ul></ul>
111                <li class="modal_btn" id="toyota">
112                    <img src="assets/img/9_38_1_030.png">
113                    <div class="upper_modal">
114                      <div class="modal_txt">
115                        <p>トヨタ</p>
116                        <p>アルファードハイブリッド</p>  
117                      </div>
118                      <div class="favorite">
119                        <div class="favorite_txt">
120                          <p>お気に入りに</p>
121                          <p>追加</p> 
122                        </div>
123                        <div class="heart">
124                          <input type="checkbox" checked id="2" name="heart"><label for="2"></label>
125                        </div>
126                      </div>
127                    </div> 
128                    <div class="detail-button">
129                        <a href="history.html"><span>詳細を見る</span><img src="assets/img/basicArrow_#cccccc.png" alt=">"/></a>
130                    </div>  
131                </li>
132              </ul>
133            </div>
134            <div class="modal_close">×</div>
135          </div>
136        </div>
137      </div>
138    </div>
139  </body>
140</html>

multipleModal.css
1
2.modal_trigger {
3    margin: 100px auto;
4    display: -webkit-box;
5    display: -ms-flexbox;
6    display: flex;
7    -webkit-box-pack: center;
8    -ms-flex-pack: center;
9    justify-content: center;
10}  
11.modal_trigger li {
12    display: inline-block;
13    box-shadow: 5px 0 13px 0px rgba(71,102,102, 0.5);
14    border-radius: 5px;
15    cursor: pointer;
16    max-width: 200px;
17    height: auto;
18    position: relative;
19    overflow: hidden;
20} 
21.modal_trigger li::before {
22    content: '';
23    display: inline-block;
24    width: 100%;
25    height: 100%;
26    background: #216518;
27    -webkit-transform: translateY(-100%);
28            transform: translateY(-100%);
29    position: absolute;
30    left: -20px;
31    top: 100%;
32    z-index: -1;
33    opacity: 0;
34}
35.modal_trigger li:hover {/*change the text color*/
36    color: #fff;
37}
38.modal_trigger li:hover::before {
39    -webkit-animation: slideRightBg ease .2s forwards;
40            animation: slideRightBg ease .2s forwards;
41}
42.modal_trigger li + li {
43    margin-left: 20px;
44}
45.upper_modal{
46    display: flex;
47    justify-content: space-around;
48}
49.modal_btn img{
50    width: 100%;
51    height: auto;
52}
53.modal_txt {
54    width: 45%
55}
56.modal_txt p{
57    margin: 0;
58    font-size: 12px;
59}
60.favorite{
61    position: relative;/*specify for .heart parent element*/
62    box-shadow: 5px 0 13px 0px rgba(71,102,102, 0.7);
63    width: 48%;
64    height: 40px;
65}
66.favorite_txt{
67    width: 100%;
68    margin-left: -10px;
69}
70.favorite_txt p:first-child{
71    margin-top: 0px;
72}
73.favorite_txt p{
74    text-align: center;
75    margin-bottom: -1em;/*line height between p*/
76    font-size: 12px;
77}
78.heart{
79    display: flex;
80}
81.heart label{
82    position: absolute;
83    width: 25px;
84    height: 20px;
85    /*keep #heart inside the #favorite*/
86    right: -5px;
87    bottom: 15%;
88}
89.heart label:before,
90.heart label:after {
91    position: absolute;
92    content: "";
93    background: #f88dc8;
94    border-radius: 50px 50px 0 0;
95    transform: rotate(-45deg);
96    transform-origin: 0 100%;
97    left: 10px;
98    top: 0;
99    width: 10px;
100    height: 15px;
101}
102.heart label:after {
103    left: 0;
104    transform: rotate(45deg);
105    transform-origin :100% 100%;
106}
107.heart input:checked+label:before,
108.heart input:checked+label:after {
109    background: #b3b3b3;
110}
111.heart input{
112    display: none;
113}
114.detail-button{
115    margin: 20px auto;/*center the box*/
116    text-align: center;/*center the a elements*/
117    border: thin solid black;
118    width: 65%;
119}
120.detail-button a{
121    text-decoration: none;
122    color: black;
123}
124.detail-button span{
125font-size: 15px;
126}
127.detail-button img{
128    width: 15px;
129    height: 15px;
130    margin-left: 10px;
131}
132
133
134  
135@-webkit-keyframes slideRightBg {
136    0% {
137      opacity: 0;
138      left: -50%;
139    }
140    100% {
141      opacity: 1;
142      left: 0;
143    }
144}
145  
146@keyframes slideRightBg {
147    0% {
148      opacity: 0;
149      left: -50%;
150    }
151    100% {
152      opacity: 1;
153      left: 0;
154    }
155}
156  
157.modal_box {
158    display: none;
159    height: 100%;
160    left: 0;
161    position: fixed;
162    top: 0;
163    width: 100%;
164    z-index: 9999;
165}
166  
167.modal_bg {
168    background-color: rgba(30, 30, 30, 0.9);
169    height: 100%;
170    width: 100%;
171}
172  
173.modal_inner {
174    background-color: #fff;
175    left: 50%;
176    padding: 20px 40px 40px 40px;
177    position: absolute;
178    top: 50%;
179    -webkit-transform: translate(-50%, -50%);
180            transform: translate(-50%, -50%);
181    max-width: 900px;
182
183}
184.modal_block ul {
185    padding-left: 0;
186}
187.modal_block li {
188    list-style-type: none;
189}
190.modal_close {
191    cursor: pointer;
192    position: absolute;
193    right: 10px;
194    top: 0;
195    font-size: 2rem;
196}