Question

我有一个缩略图网格，我想做的是放大（只是一点点）一个图像（在下一个，顶部和底部的其他图像上）而不会使网格混乱。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

问题在于，当我尝试对最后一个图像执行此操作时，在我的实际网格中，它出现在右侧，网格外和第一行中。

任何人都可以提示吗？请一本css书推荐

Answer 1

您可以使用CSS转换：

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

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

请注意，使用此方法可以使您的图像质量稍微模糊。

单击时放大网格图像

1 个答案: