html - 悬停时调整卡片大小会使下面的div跳

我将鼠标悬停在.main-partners div中调整卡片的大小，以便出现see more按钮。

我的问题是，当我:hover在.main-card div中的卡（.main-partners）上方时，下面divs行中的.partners被下推。

那不是我想要的效果。调整大小时，我希望所有卡和div都保留在原位。

我整个上午都在尝试通过前后更改.css来解决此问题。我现在没希望了。

谁能看看这个，看看我想念的是什么。
这是fiddle的链接

下面是我的代码

.card {
  border-radius: 0; }
  .card .card-img-top {
    border-radius: 0; }


@media (max-width: 767.98px) {
  .card {
    margin-top: 2vh; } }

.main-partners {
  padding: 7px 0 40px; }
  .main-partners .row {
    margin-left: -8px;
    margin-right: -8px; }
    .main-partners .row [class^="col-"] {
      padding-left: 8px;
      padding-right: 8px; }

.main-card {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  border: 1px solid #d5d2d2;
  text-decoration: none !important;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  text-align: center;
  color: inherit; }
  .main-card .card-text {
    color: #4b4b4b; }
  .main-card .more-link {
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    height: 0;
    overflow: hidden;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    transition: all ease 0.3s;
    margin-top: -5px; }
    .main-card .more-link span {
      color: #4b4b4b;
      display: block;
      padding: 7px 0 3px;
      border-top: 1px solid lightgray; }
      .main-card .more-link span:before {
        content: '+ ';
        color: #c2002d;
        display: inline-block;
        vertical-align: top;
        margin-left: 0px;
        padding-right: 4px; }
  .main-card:hover {
    margin: -11px 0px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }
    .main-card:hover .more-link {
      height: 31px; }

/* partners */
.partners {
  padding: 7px 0 120px; }
  .partners .row {
    margin-left: -8px;
    margin-right: -8px; }
    .partners .row [class^="col-"] {
      padding-left: 8px;
      padding-right: 8px; }
  .partners .item {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    border: 1px solid #d5d2d2;
    text-decoration: none !important;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    height: 137px;
    text-align: center;
    color: inherit; }
    .partners .item figcaption {
      font-size: 16px;
      line-height: 24px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 2px 10px 8px; }
    .partners .item .logo {
      height: 50px;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center; }
      .partners .item .logo img {
        display: inline-block;
        vertical-align: top;
        max-height: 100%;
        max-width: 100%; }
      .partners .item .logo .text {
        display: block;
        font-size: 24px;
        line-height: 34px;
        font-weight: 500;
        padding: 14px 0 0; }
    .partners .item .more-link {
      width: 142px;
      margin-left: auto;
      margin-right: auto;
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
      height: 0;
      overflow: hidden;
      -webkit-transition: all ease 0.3s;
      -o-transition: all ease 0.3s;
      transition: all ease 0.3s;
      margin-top: -5px; }
      .partners .item .more-link span {
        display: block;
        padding: 7px 0 3px;
        border-top: 1px solid lightgray; }
        .partners .item .more-link span:before {
          content: '+ ';
          color: #c2002d;
          display: inline-block;
          vertical-align: top;
          margin-left: -20px;
          padding-right: 4px; }
    .partners .item:hover {
      margin: -11px -8px;
      height: 159px;
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }
      .partners .item:hover .more-link {
        height: 31px; }

@media (max-width: 991px) {
  .partners {
    padding-bottom: 60px; } }

@media (max-width: 767px) {
  .partners {
    padding-bottom: 40px; } }

@media (max-width: 991px) {
  .partners .row [class^="col-"] {
    padding-bottom: 16px; } }

@media (max-width: 1219px) {
  .partners .item figcaption {
    font-size: 14px; } }

@media (max-width: 991px) {
  .partners .item figcaption {
    font-size: 16px; } }

@media (max-width: 767px) {
  .partners .item figcaption {
    font-size: 14px; } }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container main-partners">

  <div class="row flex-row">
    <div class="col-sm-12 col-md-4">
      <a href="#" class="main-card">
      <div class="card">
        <img class="card-img-top" src="#" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..</p>
            <footer class="more-link">
              <span>See more</span>
            </footer>
          </div>
      </div>
        </a>
    </div>




    <div class="col-sm-12 col-md-4">
      <a href="#" class="main-card">
      <div class="card">
        <img class="card-img-top" src="#" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..</p>
            <footer class="more-link">
              <span>See more</span>
            </footer>
          </div>
      </div>
        </a>
    </div>


    <div class="col-sm-12 col-md-4">
      <a href="#" class="main-card">
      <div class="card">
        <img class="card-img-top" src="#" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..</p>
            <footer class="more-link">
              <span>See more</span>
            </footer>
          </div>
      </div>
        </a>
    </div>
  </div>
</div>




  <div class="container">

  <div class="partners">
<div class="row flex-row">
    <div class="col-lg-3 col-md-6">
       <a href="#" class="item">
          <figure>
            <div class="logo">
              <strong class="text">Partner</strong>
            </div>
            <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
          </figure>
          <footer class="more-link">
            <span>see more</span>
          </footer>
        </a>
    </div>
    <div class="col-lg-3 col-md-6">
            <a href="#" class="item">
          <figure>
            <div class="logo">
              <strong class="text">Partner</strong>
            </div>
            <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
          </figure>
          <footer class="more-link">
            <span>see more</span>
          </footer>
        </a>
    </div>
    <div class="col-lg-3 col-md-6">
    <a href="#" class="item">
          <figure>
            <div class="logo">
              <strong class="text">Partner</strong>
            </div>
            <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
          </figure>
          <footer class="more-link">
            <span>see more</span>
          </footer>
        </a>
    </div>
    <div class="col-lg-3 col-md-6">
      <a href="#" class="item">
          <figure>
            <div class="logo">
              <strong class="text">Partner</strong>
            </div>
            <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
          </figure>
          <footer class="more-link">
            <span>see more</span>
          </footer>
        </a>
    </div>
</div>
</div>
<!-- partners -->

    <!-- / event-area -->
</div>

最佳答案

对于.main-partners，您需要遵循与.partners相同的模式。创建一个新的div并在其中添加.main-partners。在带有.main-partners .card: hover的CSS中使用它并可以正常工作。
这是Fiddle链接