在图像滚动时使帖子标题出现在鼠标悬停/悬停上

Question

所以，我有一个 div flex，它使用 Custom Fields 和 Twig 从 wordpress 获取 3 个帖子。

我得到图像、标题，然后将它们显示在 div 中，一切都很好。现在我想做下面的例子，当鼠标移到图像上时，图像会逐渐失去它的向下部分，并且会显示标题以及发布顺序。我尝试了鼠标悬停、悬停和其他东西，但我无法让它工作。所以先看看，这是朋友做的模型：

What I wanna do

这是我想做的，我的项目就是这样，不同的是标题在图片下面，顺序（01、02、03）没有显示。在此处检查当前状态：

What I have done so far

这是用于从 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 标签设置一个固定的高度和溢出

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 %}