チェック時にimgに色をかぶせたい

前提・実現したいこと

CSSについての質問です。
次のようなHTMLで、チェックがされているときにimgに色をかぶせるようにしたいのですがCSSのみで行うことはできますか？
チェックボックスは非表示にしたいです。

<li>
    <label>
        <span>foo</span>
        <input type="checkbox"/>
        <img src="https://foo.com/bar.jpg" , width="100" />
    </label>
</li>

既に試したこと

このようにliに色を付けてチェック時にimgを透過するようにもしてみたのですが、imgに透過領域のある画像を置くこともあるのでliの色も変える方法か、別の方法を知りたいです。

li {
    display: inline-block;
    position: relative;
    list-style: none;
    width: 79px;
    height: 79px;
    margin: 1px;
    background-color: red;
}
span {
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 5px;
    color: rgba(255,255,255,0.8);
    background-color: rgba(0,0,0,0.5);
}
input {
    display: block
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
input:checked+img {
    opacity: 0.7;
}

行動規範の内容に同意します

回答1件

ベストアンサー

提示されたHTML構造では無理があるため、チェックボックスに反応できる要素を増やす必要があります。
あとは擬似要素をつかって色を被せればよいと思います。

HTML
1<!-- label要素の擬似要素を使って被せる -->
2<li>
3    <input id="test" type="checkbox"/>
4    <label for="test">
5        <span>foo</span>
6        <img src="https://foo.com/bar.jpg" , width="100" />
7    </label>
8</li>

HTML
1<!-- figure要素の擬似要素を使って被せる -->
2<li>
3    <label>
4        <input type="checkbox"/>
5        <figure>
6            <figcaption>foo</figcaption>
7            <img src="https://foo.com/bar.jpg" , width="100" />
8        </figure>
9    </label>
10</li>
11```**動くサンプル：**[https://jsfiddle.net/50ctd4zy/](https://jsfiddle.net/50ctd4zy/)
12
13---
14
15
16【::after (:after) - CSS: カスケーディングスタイルシート | MDN】
17[https://developer.mozilla.org/ja/docs/Web/CSS/::after](https://developer.mozilla.org/ja/docs/Web/CSS/::after)