Php 悬停时将同级元素定位到同一底部（父元素没有固定高度）

我有一个类似自动取款机的东西

这些缩略图和标题来自数据库（与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>

正文{
}
.拇指垫块{
边缘底部：22px；
}
.团队剖面图：第n种类型（3n+1）{
清除：左；
}


你的文字在这里


你的文字在这里


你的文字在这里


正文{
}
.拇指垫块{
边缘底部：22px；
}
.团队剖面图：第n种类型（3n+1）{
清除：左；
}


你的文字在这里


你的文字在这里


你的文字在这里

如果我没有正确理解您想要实现的目标，这可能就是解决方案

.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;
}

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

.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;
}