Как сделать затемнение другим цветом, при наведении на фото?

Question

Сергей Соболь @Dikkkey

Начинающий программист.

Как сделать затемнение другим цветом, при наведении на фото?

Мне нужно сделать так, чтобы когда я наводил на фотографию - появлялась стрелочка и фото покрывалось другим цветом с прозрачностью (фото прикрепил ниже). Уже сломал голову, гуглил, спрашивал, но так и не нашел ответ. Очень надеюсь на вашу помощь!

HTML:

<div class="collection__menu">
                        <div class="col-lg-4">
                            <div class="collection__item">
                                <img src="img/photo_shop1.png" alt="Фото товара" class="collection__img">
                                <a href="#" class="collection__arrow"></a>
                                <h3 class="collection__subtitle">Футболка USA</h3>
                                <span class="collection__sale">$229</span>
                                <span class="collection__price">$129</span>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="collection__item">
                                <img src="img/photo_shop2.png" alt="Фото товара" class="collection__img">
                                <a href="#" class="collection__arrow"></a>
                                <h3 class="collection__subtitle">Купальник Glow</h3>
                                <span class="collection__price">$129</span>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="collection__item">
                                <img src="img/photo_shop3.png" alt="Фото товара" class="collection__img">
                                <a href="#" class="collection__arrow"></a>
                                <h3 class="collection__subtitle">Свитшот Sweet Shot</h3>
                                <span class="collection__price">$129</span>
                            </div>
                        </div>
                    </div>

CSS:

.collection__menu {
    align-items: center;  
    display: flex;  
}

.collection__item {
    text-align: center;
}

.collection__img {
    margin-top: 85px;
    display: block;
    cursor: pointer;
}

.collection__subtitle {
    font-weight: 500;
    font-size: 20px;
    margin-top: 27px;
    margin-bottom: 7px;
}

.collection__sale {
    color: #9C9C9C;
    text-decoration-line: line-through;
    font-size: 15px;
    letter-spacing: 0.02em;
    margin-right: 10px;
}

.collection__price {
    color: #998E78;
    font-size: 15px;
    letter-spacing: 0.02em;
}

Как должно быть: