Размещение загрузочных карт поверх изображения приводит к серой карте

Question

Я пытаюсь воссоздать блог в стиле https://codeofmatt.com/, и у меня есть все карточки в позиции для каждого сообщения в блоге, но сейчас я пытаюсь, чтобы карточки «зависали» над заголовком image, по какой-то причине, когда я перемещаю div над изображением, карты становятся серыми, и моя анимация при наведении больше не работает для той части, которая находится над изображением.

Здесь вы можете увидеть, что происходит на моей странице, по сравнению с тем, как это выглядит в блоге Мэтта

Я пытался проверить, прозрачно ли это на картах, но это не дало эффекта. Кажется странным, что текст не затронут. Как уже упоминалось, у меня есть анимация при наведении, которая работает так же, как в блоге Мэтта, но при наведении курсора на часть карты, охватывающую изображение, эта анимация не работает. Ниже приведен CSS, который я использую для карт, если он имеет какое-либо применение. Спасибо за любые предложения!

   .card {
  background: #fff 50%;
  color: black;
  transition: transform 0.5s;
  border-radius: 5px;
  box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03);
  margin: 0 20px 40px;
  min-height: 300px;
  background-size: cover;
}

.card a {
  color: black;
  text-decoration: none;
}

.card-body {
  overflow: hidden;
  text-overflow: ellipsis;
}

Edit: В соответствии с моей просьбой моя версия начальной загрузки v4.3.1 и моя разметка для размещения карт такова:

{% assign rows = site.posts.size | divided_by: 3.0 | ceil %}
<div class="container" style="margin-top: -4em" >
    {% for i in (0..rows) %}
    {% assign offset = forloop.index0 | times: 3 %}
    <div class="row justify-content-md-center">
        {% for post in site.posts limit:3 offset:offset %}
            {% include post-card.html %}
        {% endfor %}
    </div>
    {% endfor %}
</div>

А код для карточек:

<div class="card" style="width: 20rem; margin-left:1rem; margin-right:1rem">
    <a href="{{ post.url }}">
        <div class="card-body">
            <div class="post-card-header">
                {% for category in post.categories %}
                <span class='card-category'>{{category}} </span>
                {% endfor %}
                <span class="reading-time">5 min read</span>
            </div>
            <h5 class="card-title" style="font-weight: bold;">{{post.title}}</h5>
            <p>{{ post.content | strip_html | truncate:150 }}</p>
        </div>
    </a>
</div>