css - 避免 CSS 动画离开视口(viewport)

Question

我正在尝试设置一个带有磁贴的网页设计，它会在悬停时缩小。它基本上工作正常。但是屏幕边缘的图 block 显然超出了视口(viewport)。没有 JavaScript 有什么办法可以解决这个问题吗？

#tiles article {
    width: 150px;
    height: 225px;
    position: relative;
    float: left;
    margin: 5px;
    vertical-align: top;
}
#tiles div.growingtile {
    position: absolute;
    top:0;
    left:0;
    width: 150px;
    height: 225px;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2 ease-in-out;
}
#tiles div.growingtile:hover {
    z-index: 100;
    left: -75px;
    top: -10px;
    width: 300px;
    height: 320px;
    overflow: visible;
    background-color: yellow;
}

<section id="tiles">
  <article>
    <div class="growingtile">
      <p>This is just a demo text.</p>
    </div>
  </article>
  <article>
    <div class="growingtile">
      <p>This is another demo text.</p>
    </div>
  </article>
</section>

例如，想象一个瓷砖画廊延伸到多条线上。所有中间瓷砖的行为都完全符合我的要求。然而，最左边的图 block 不应更改其左侧值。虽然这对于第一个图 block 来说很简单，但我正在为每个最左边和可能最右边的图 block 寻找解决方案。

如果没有 CSS only 解决方案。我目前想象的最简单的解决方案是为所有图 block 添加一个悬停处理程序，它会在需要时调整图 block 位移。我也欢迎任何更简单的想法。

Answer 1

我绝对可以通过使用 :first-child 伪类让它为您的第一个 child 工作。

您还可以为 :last-child 或 :nth-child() 添加能力。

#tiles article {
  width: 150px;
  height: 225px;
  position: relative;
  float: left;
  margin: 5px;
  vertical-align: top;
}
#tiles div.growingtile {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 225px;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.2 ease-in-out;
}
#tiles div.growingtile:hover {
  z-index: 100;
  left: -75px;
  top: -10px;
  width: 300px;
  height: 320px;
  overflow: visible;
  background-color: yellow;
}
#tiles article:first-child div.growingtile:hover {
  left: 0;
}

<section id="tiles">
  <article>
    <div class="growingtile">
      <p>This is just a demo text.</p>
    </div>
  </article>
  <article>
    <div class="growingtile">
      <p>This is another demo text.</p>
    </div>
  </article>
</section>