Hmmm, you could let the hover-card be positioned based on the image, if you put the hover-card element inside the element which holds the image, something like this:
<figure>
<img src="image.jpg">
<div class="hover-card">
...
</div>
</figure>
If you give <figure> a position: relative, then you can place position: absolute on the hover-card. If you need a codepen, let me know :)