javascript - 单击时在网格上放大图像

Question

我有一个缩略图网格，我想做的是放大(只是一点点)图像(在接下来的其他图像上，顶部和底部)而不会使网格困惑。

我一直在尝试不同的选择，先完成显示图像的 Action ，然后再完成动态。

#thumbnail-grid {
   background-color: #1F1F1F; 
   height: 450px;
}

#thumbs {
  max-height: 400px;
  overflow-y: auto;
  
  position: relative;
}

img {
   float: left;
   margin: 1px 1px 1px 1px;
   z-index: 10;
}

.ontop {
  z-index: 200;
  width: 80px;
  height: 50px;
  position: absolute;
}

<div id="thumbnail-grid">
  <div id="thumbs">
    <img class="thumbnail" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
    <img class="thumbnail ontop" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
    <img class="thumbnail" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
    <img class="thumbnail" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
    <img class="thumbnail" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
    <img class="thumbnail" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
    <img class="thumbnail ontop" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
    <img class="thumbnail" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
  </div>
</div>

问题是，在我的真实网格中，当我尝试对最后一张图像执行此操作时，它出现在右侧，超出网格并位于第一行。

有人可以给个小费吗？请推荐一本 CSS 书籍

Answer 1

您可以为此使用 CSS 转换:

.ontop {
    transform: scale(1.1); // 1.1 means "scale to 110% of original size"
}

如果您需要更广泛的浏览器支持，请添加 vendor 前缀的属性。

请记住，使用这种方法您的图像质量可能会变得有点模糊。