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

Question

所以我有一个看起来像这个 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)？

谢谢!

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

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