Make background image darken on hover

Question

I want to make the background image of something darker when I hover over it. Currently it will make everything dark including the text.

Here is the html

<div class="col-md-6 cities">
    <div class="card card-background cities" fadebg="true" data-image="https://test.jpg">
        <div class="card-body">
            <h3 class="card-title">TEST</h3>
            <p class="card-description">
                TEST
            </p>
        </div>
    </div>                        
</div>

Here is the jquery:

$('.cities').find('.card.card-background.cities').hover(function () {
    //$(this).find("[fade=bg]").fadeTo(500, 0.5);
    $(this).find('.card-title').css("display", "block");
    $(this).find('.card-description').css("display", "block");
},
function () {
        //$(this).find("[fade=bg]").fadeOut(500);
        $(this).find('.card-title').css("display", "none");
        $(this).find('.card-description').css("display", "none");
    }
);

The data image is being rendered into a background image

setTimeout(function () {
    $(document).ready(function () {
        $('div[data-image]').each(function () {
            $(this).css("background-image", "url('" + 
    $(this).attr('data-image') + "')");
        });
    });
}, 1000);

Answer 1

Don't push by using Jqueries you can do it with css. Add this class to your div, change image path in css below and paste code in <style></style> or add in your custom css

.last-phone
    {
        background-image:linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ),url('./images/your_image.jpg');    
}
.last-phone:hover
{
    background-image:linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9) ),url('./images/your_image.jpg');
}