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

Question

Итак, у меня есть гибкий div, который принимает 3 сообщения из wordpress, используя настраиваемые поля и Twig .

Я получаю изображения, заголовки и я покажите их внутри 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

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

и маг c появляется, когда вы наводите курсор: просто переведите изображение вверх!

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