Get an array of background-image to save for later and then on hover switch between them and a background color

Question

Here's my problem:

I created a block that looks like this:

<div class="col-md-4">
    <a href="/our-difference/our-story/"><p></p>
        <div class="img-link" style="background-image: url(/wp-content/uploads/2016/07/our_story_600x400-1.jpg)">
            <div class="text">
                <h2>Our Story</h2>
                <h3>For over 25 years we have specialized in and excelled at health care and human services education.</h3>
            </div>
        </div>
    </a>
</div>

CSS:

.img-link {
    position: relative;
    width: 100%;
    height: 200px;
    background-size: cover;
    &:hover {
       opacity: .9;
   }
   .text {
       position: absolute;
       top: 10px;
   }

}

My problem is that I had to set up the HTML in a friendly way since it's WordPress, so I had to add the background image inline.

My goal is the following:

When a user will hover the div, where the background image lives, the color will change to an actual color with opacity and the text won't be affected (like it should happen if you use the opacity property).

But if I use mouseOut and mouseOver, for example:

$('.img-link')
.mouseover(function(){
    $(this).css('background', 'green');
})
.mouseout(function(){
    $(this).css('background', 'initial');
});

When the user will leave the image, the background will come back to the initial image, which at the moment will be null.

Before:

background-image: url(/wp-content/uploads/2016/07/our_story_600x400-1.jpg);

After

background-color: #9b7878a8.

In the final step, the background will be empty.

My question is: is there a way to 'save' the background image (like in an array) and then use the value of the array to reapply the original background image?

Something like:

let arrayimage = $('.img-link');

$('.img-link')
.mouseover(function(){
    $(this).css('background', 'green');
})
.mouseout(function(){
    $(this).css('background', arrayimage);
})

This is just an example, the code is far away to be right, I'm a novice.

Answer 1

Seeing that you're using jQuery, this would actually be quite simple and, assuming you only have the one background-image to store, would not require an array at all.

$(document).ready(function(){
    var imgBackground = $('.img-link').css('background-image');
    $('.img-link').mouseover(function(){
        $(this).css('background', 'green');
    }).mouseout(function(){
        $(this).css('background', imgBackground);
    });
});

Here, starting with $(document).ready() ensures that your inline image is loaded before doing anything else. We can then safely store your loaded in image in a variable with jQuery's .css() function, telling it to retrieve the background-image. On your mouse-out, all you'll need to do is reassign that variable as the image.

If you need to remove the url(...) that surronds the link to your image, you can go see another similar answer that includes that information here : Can I get div's background-image url?