如何使Bootstrap 4 Image Overlay卡完全可点击？

<div class="card">
  <img src="image.jpg" class="card-img-top" alt="Image">
  <div class="card-img-overlay">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Description</p>
  </div>
</div>

.card-img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 设置透明度，可以根据需要进行调整 */
  opacity: 0; /* 设置初始透明度为0，使其不可见 */
  transition: opacity 0.3s ease; /* 添加过渡效果，使其在鼠标悬停时逐渐显示 */
  cursor: pointer; /* 添加指针样式，表示可点击 */
}

.card:hover .card-img-overlay {
  opacity: 1; /* 鼠标悬停时显示覆盖层 */
}

$('.card-img-overlay').click(function() {
  $('#myModal').modal('show');
});