Question

我有一个如下所示的网格视图：

 jQuery(window).resize(function(evt) {
   jQuery(".grid-content > div > div > .channelImage").height(jQuery(".grid-content > div > div > .channelImage").width());
 });
 jQuery(function() {
   jQuery(window).resize();
 });

    body {
      background-color: rgba(48, 48, 48, 1);
    }

    body>.container {
      max-width: 90vw;
    }

    .previewrow {
      height: 40vh;
    }

    .preview {
      position: absolute;
      left: 0;
      right: 0;
      height: 40vh;
    }

    .grid-content>div>div {
      margin: 3vw;
      box-shadow: 6px 6px 6px black;
      border: 1px solid white;
      text-align: center;
      color: white;
    }

    .grid-content>div {
      float: left;
    }

    .grid-content>div>div>.channelImage {}

    .grid-content>div>div>.channelImage:before {
      content: " ";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }

    .grid-content>div:hover>div {
      box-shadow: 0 0 0 black;
      transition: all 0.25s;
      margin: 1em;
    }

<!-- Bootstrap and JavaScript -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap-grid.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="container body-content">
    <div class="grid-content">

      <!-- One -->
      <div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
        <div>
          <div class="channelImage">
            <img width="30%" />
          </div>
          <div>
            Some text
          </div>
        </div>
      </div>
      <!-- Two -->
      <div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
        <div>
          <div class="channelImage">
            <img width="30%" />
          </div>
          <div>
            Some text
          </div>
        </div>
      </div>
      <!-- Three -->
      <div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
        <div>
          <div class="channelImage">
            <img width="30%" />
          </div>
          <div>
            some text
          </div>
        </div>
      </div>
      <!-- Four -->
      <div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
        <div>
          <div class="channelImage">
            <img width="30%" />
          </div>
          <div>
            Some text
          </div>
        </div>
      </div>
      <!-- Five -->
      <div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
        <div>
          <div class="channelImage">
            <img width="30%" />
          </div>
          <div>
            Some text
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

如您所见，每当用户将鼠标悬停在正方形上时，我都会尝试放大正方形。但是调整边距会导致其他框被移动。如何扩大正方形，使它们不移动其他盒子？

Answer 1

您可以通过使用以下CSS并将其应用到您要实现的元素上来使某些东西变大而无需移动任何东西

.class {
  transition: .10s, transform .10s ease;
  -moz-transition: .10s, transform .10s ease;
  -webkit-transition: .10s, transform .10s ease;
}

.class:hover {
  -ms-transform: scale(1.01); /* IE 9 */
  -webkit-transform: scale(1.01); /* Safari */
  transform: scale(1.01);
}

作为奖励，您可以单击鼠标使其收缩以产生弹簧般的效果：

.class:active {
  -ms-transform: scale(0.99); /* IE 9 */
  -webkit-transform: scale(0.99); /* Safari */
  transform: scale(0.99);
}

Answer 2

我只是在考虑这个问题，但是我没有使用Bootstrap。

您不能只使用其他图像/元素，获取基础元素的x和y坐标并将其放置在顶部。上方的元素显示下方元素的内容，但尺寸较大。您也可以使下面的元素的宽度更宽。这样右边的元素就会移动。下面的元素将不会移动。

我刚刚快速完成，效果很好。我唯一的问题是在滚动时获得x，y坐标。

完成后，我将发布代码。

谢谢。

悬停时的Bootstrap专栏扩大（如Netflix）

2 个答案: