php - 将兄弟元素定位到悬停时的相同底部(父级没有固定的高度)

所以我有一些看起来像这个atm的东西

这些缩略图和标题来自数据库（与omeka一起使用）。
我想要的是标题底部（随标题的大小而变化），等于缩略图底部，因此标题是某种“叠加”。

为了使其更加完美，我希望此效果仅在缩略图悬停时可见，并作为一个小动画从底部出现。

在DOM中，这看起来像

  <div class='col-3 collection-item'>
      <a href="link"><img/></a>
      <p class="collection-item-title"></p>
  </div>

在我的代码中，它被称为

<?php if (metadata('collection', 'total_items') > 0): ?>
<?php foreach (loop('items') as $item): ?>
<div class="col-3 collection-item">
  <?php if (metadata('item', 'has thumbnail')): ?>
   <?php echo link_to_item(item_image('square_thumbnail', array('alt' => $itemTitle))); ?>
   <p class="collection-item-title"><?php echo $itemTitle; ?></p>
  <?php endif; ?>
</div>
<?php endforeach>
<?php endif>

由于所有大小（缩略图和标题）都不同，我如何最好地处理Sass（css）？

谢谢！

最佳答案

如果我确实正确理解了您想要实现的目标，则可能是解决方案

.collection-item {
  position: relative;
  overflow:hidden;
}
.collection-item-title {
  padding: 10px;
  background: rgba(blue, .4);
  text-align:center;
  margin:0;
  position:absolute;
  bottom: 0;
  width: 100%;
  transform:translate(0%, 100%); //move it down by 100% of its _own_ height
  transition: transform .4s ease-in-out .2s;
}
.collection-item:hover .collection-item-title {
  transform:translate(0%, 0%); //move it back up
  transition: transform .4s ease-in-out .2s;
}

https://codepen.io/anon/pen/qPegOq