使帖子标题出现在 mouseover/hover 上，同时图像汇总

Question

所以，我有一个 div flex，它使用 Custom Fields 和 Twig[=30 从 wordpress 获取 3 posts =].

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

What I wanna do

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

What I have done so far

这是用于从 wordpress
获取 post 的代码
/* 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 %}

使帖子标题出现在 mouseover/hover 上，同时图像汇总

Making titles of posts appear on mouseover/hover while image rolls up

html

css

wordpress

twig

web