Make product cards clickable again after showing quick add button on hover

[BijouFairy]

I have added some css to my theme.liquid file that makes the quick add button appear on hovering over any product card. I'm really happy with it but now the picture is not clickable anymore. Could someone please help me to figure out how to fix it?

The css I've added is this:

<style>
.card-wrapper.product-card-wrapper {
    position: relative;
}
.card-wrapper.product-card-wrapper .card--standard>.card__content {
    position:relative;
    display: flex;
    flex-direction: column;
}
.card-wrapper.product-card-wrapper .quick-add {
    position: absolute;
    width: 80%;
    top: -50%;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    justify-content: center;  
    display: none;
}
.card-wrapper.product-card-wrapper:hover .quick-add {
    display: flex;
}
</style>

I've already figured out that the image becomes clickable again if I remove the line
position:relative;
from the .card-wrapper.product-card-wrapper .card--standard>.card__content {}.

But then the quick-add button is no longer visible.

My store page is this: https://bijoufairy.com/ 

[BijouFairy]

I have added your code but the image is still not clickable. It is as you say, I currently have to choose between those two: having a clickable image or having a visible Quick Add button. I am fine with creating a custom button and feel comfortable editing my product card template. Could you give me some guidance how to do that? Thank you already for looking into this!