Question

因此，我有一个div flex，它使用自定义字段和 Twig 从wordpress接收3条帖子。

我得到图像，标题，并在div中显示它们，一切都很好。现在，我要进行以下说明，当鼠标移到图像上时，图像将逐渐失去其下部，并显示标题和发布顺序。我尝试了鼠标悬停，悬停等操作，但无法正常工作。因此，请先检查一下，这是一个朋友制作的模型：

这是我想做的，我的项目就是这样，区别在于标题位于图像下方，并且未显示顺序（01、02、03）。在此处检查当前状态：

这是用于从wordpress获取帖子的代码

/* Main file code : */

{% for post in homeserviceposts %} 
    {% include 'category.twig' %}
{% endfor %}

/* Imported file code: */

{% block content %}
<a title="{{post.title}}" href="{{post.link}}">
    {% if post.thumbnail.src %}<img class="img-responsive post-image" src="{{post.thumbnail.src}}"/> {% endif %}
    <h2 class="post-title">{{post.title}}</h2>
</a> {% endblock %}

基本上就是这样，我感谢所有花时间尝试教我一些新东西的人！

Answer 1

您可以将内容包装在另一个div中，如下所示：

<a href="/">
  <div>
    <img src="...">
    <h2>...</h2>
  </div>
</a>

然后在css中为标签设置固定的高度加溢出

a {
  border: 1px solid black;
  display: block;
  height: 300px;
  overflow: hidden;
  width: 200px;
}

当您将鼠标悬停时，魔术就来了：只需将图像向上平移即可！

a:active > div,
a:focus > div,
a:hover > div {
  transform: translateY(-50%);
}

最后通过设置起点和过渡到div来添加一些动画

a > div {
  transition: transform 100ms;
  transform: translateY(0);
}

（当然，可以根据需要调整值）

在wordpress中（不是100％熟悉），它会变成类似

{% block content %}
  <a title="{{post.title}}" href="{{post.link}}">
    <div>
      {% if post.thumbnail.src %}
        <img class="img-responsive post-image" src="{{post.thumbnail.src}}"/> 
      {% endif %}
      <h2 class="post-title">{{post.title}}</h2>
    </div>
  </a>
{% endblock %}

在图像滚动时，使标题显示在鼠标悬停/悬停上

1 个答案: