Question

我正在尝试以https://codeofmatt.com/的样式重新创建博客，并且每个博客帖子都放置了所有卡片，但是现在我试图将卡片“悬停”在标题图像上，由于某种原因，当我将div移到图像上方时，卡片变灰，并且我的悬停动画不再适用于图像上方的部分。

You can see here whats happening on my page compared to how it looks on Matt's blog

我尝试检查卡片上是否透明，但这没有效果。文本不受影响似乎有些奇怪。如前所述，我的悬停动画的工作方式类似于Matt的博客，但是当我悬停覆盖图像的卡片部分时，此动画无效。如果有什么用，下面是我用于卡片的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;
}

编辑：根据要求，我的引导程序版本为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>

将引导卡放置在图像上会使卡变灰

0 个答案: