Question

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

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

为了让它更加完美，我希望这只能在thumbnail-hover＆amp;作为一个小动画从底部进来。

在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

Answer 2

body {
}
.thumb-block{
    margin-bottom: 22px;
}
.team-section figure:nth-of-type(3n+1) {
    clear: left;
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />

    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="css/StyleSheet1.css" />

</head>
<body>
    <div class="team-section">
    <figure class="col-md-4 col-sm-6" >
        <div class="thumb-block">
            <img src="../images/aa.jpg" style="height:20%; width:100%">
        </div>
        <figcaption>
           
            <p>
                your text here
            </p>
        </figcaption>
    </figure>

    <figure class="col-md-4 col-sm-6">
        <div class="thumb-block">
            <img src="../images/aa.jpg" style="height:20%; width:100%">
        </div>
        <figcaption>

            <p>
                your text here
            </p>
        </figcaption>
    </figure>

    <figure class="col-md-4 col-sm-6">
        <div class="thumb-block">
            <img src="../images/aa.jpg" style="height:20%; width:100%">
        </div>
        <figcaption>

            <p>
                your text here
            </p>
        </figcaption>
    </figure>
        </div>
</body>
</html>

给img以及img和title

的父div提供高度和宽度

.sync
{
height:30%;
width:50%;
}

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

在悬停时将兄弟元素定位到相同的底部（父级没有固定的高度）

2 个答案: