Is there a way to create an effect where hovering over a specific book image will display a checkmark, indicating selection upon click? Ideally, users should be able to press alt (cmd on mac) to select multiple books simultaneously.
Check out the HTML below:
<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>
Take a look at 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'm struggling to make one image appear on top of another when hovering. While I've seen guides on combining HTML and CSS background-images and transitioning between images, finding resources on layering images has been challenging. Additionally, the check.png should be positioned in the top right corner outside of the div. Any advice would be appreciated!
EDIT: Thank you for the quick response Mathias, that was a small mistake. Even after implementing multiple bg-images in the .book_div:hover css, I couldn't get it to work. Upon hover, the cursor changes but the second image doesn't show up at all. (I've corrected the syntax now and will update these notes accordingly)