Css 如何将黑色悬停添加到图像？

我有个小问题。我是一名网络开发新手。我在Bootstrap4中创建项目

我有以下代码：

<section class="front-banners">
        <div class="container">
            <div class="row">
                <div class="col-12 pb-4 mb-md-1">
                    <div class="card bg-dark text-white">
                        <a href="/produkty"><img class="card-img front-banner-img" src="/img/banner.jpg" alt="Kuchnie"></a>
                        <a href="/produkty">
                            <div class="card-img-overlay front-banner-overlay">
                                <h5 class="card-title">Title </h5>
                                <img src="/img/arrow-front.png">
                                <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                                <p>Poznaj ofertę</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

我想补充一点：

<img class="card-img front-banner-img" src="/img/banner.jpg" alt="">

将光标悬停在照片上后，我希望照片是黑白的

---

我如何才能做到这一点？

以下css将适用于您：

.card-img:hover{
    filter: grayscale(100%);
}

将

过滤器：灰度（）

添加到图像悬停。

.card-img:hover{
    filter: grayscale(100%);
}