Custom FileInput on card - Bootstrap 5 - html

Question

I am trying to add a custom file selection on the card using Bootstrap:
I try this:
<style>
label {
cursor: pointer;
}
.custom-input-image {
opacity: 0;
position: absolute;
z-index: -1;
}
</style>
<div class="row mb-2">
<div class="col-md-4 text-center">
<input type="file" id="id_img_1" name="id_img_1" class="custom-input-image">
<label for="id_img_1" class="hover-shadow-lg hover-translate-y-n3">
<div class="card">
<div class="card-body text-center">
<!-- Image content-->
<div>
<div>
<h4 class="mb-1"><i class="camera-icon"></i></h4>
<small>Select file...</small>
</div>
</div>
</div>
</div>
</label>
</div>
[...more cards..]
</div>
It gets the following effect:
I need this:
Adding a label to a card causes the card to shrink. How to get full length of card with added file selection.

Answer 1

I've used font-awesome icons just as a placeholder icon, but you can try something like this:
label {
cursor: pointer;
display: block;
font-size: 0.875rem;
margin-top: 10px;
}
.custom-input-image {
opacity: 0;
position: absolute;
z-index: -1;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<div class="col-md-12 col-sm-12">
<div class="row g-2 mt-3">
<div class="col-md-4 col-sm-4 text-center">
<input type="file" name="" id="" class="custom-input-image">
<div class="card p-4 border border-3">
<i class="fas fa-camera fa-2x"></i>
<label for="">Select file</label>
</div>
</div>
<div class="col-md-4 col-sm-4 text-center">
<input type="file" name="" id="" class="custom-input-image">
<div class="card p-4 border border-3">
<i class="fas fa-camera fa-2x"></i>
<label for="">Select file</label>
</div>
</div>
<div class="col-md-4 col-sm-4 text-center">
<input type="file" name="" id="" class="custom-input-image">
<div class="card p-4 border border-3">
<i class="fas fa-camera fa-2x"></i>
<label for="">Select file</label>
</div>
</div>
</div>
</div>