Hover over image to produce another image on top without affecting image below using background-image

Question

I want an effect where when a user hovers over a certain book image (see below), a checkmark box will pop up to indicate that it will be selected upon clicking. Eventually, I want a person to be able to press alt (cmd on mac) to select multiple books.

Here is the HTML:

<div class="container">
    <div class="wrapper">
        <div class="upload_div">
            <div class="upld_div1">
                <ul>
                    <li>
                        <div class="book_div"></div>
                        <div class="book_shdw"></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Here is the current CSS:

.book_div {
    background-image:url(../img/book_img.png);
    background-size: 67.9px 105px;
    border:1px solid #bfc1c4;
    width:67.9px;
    height:105px;
    text-align:center;
    margin: auto;
}  

.book_div:hover{
    cursor:pointer;
    background-image: url(../img/book_img.png),
                      url(../img/check.png);
    background-position: relative;  
}

I can't for my life figure out how to get another image to go on top of the other upon hover. There are a lot of explanations on SO and other forums on how to get a HTML to combine with a CSS background-image as well as how to change one image into another, but not many explanations on how to get one on the other. Please also note that the check.png should be placed in the top right corner so that it's outside of the div. Please offer any insight! Thanks.

EDIT: Thanks for the prompt reply Mathias, that was a little typo. I implemented multiple bg-images in the .book_div:hover css but was still unable. When I do that, the cursor changes upon hover, but the second image does not pop up at all. (I've edited the syntax now and will edit these notes in)

Answer 1

You should put the top image first when you declare multiple background images.

I find this article great for explaining the stacking order of background images: http://css-tricks.com/stacking-order-of-multiple-backgrounds/

Hope this helps!

DEMO

.book_div:hover{
    cursor:pointer;
    background-image: url(./top_image.png), url(./bottom_image.svg);
}