html - 在 Bootstrap 卡中转换图像

Question

这是我的问题，我已经成功地按照我的意愿对我的 Bootstrap 卡进行了编码，但是一个小细节让我很伤心。

我想确保“transform scale”不考虑按钮“infos”和“mods”

只有我可以挠头尝试各种我无法摆脱这个关卡的事情。

这是 CSS 和 HTML 代码。

 <div class="card-deck row">

<div class="col-3"><!--event serv-->
  <div class="card">
    <div class="card bg-inverse">
     <div class="card-block card-inverse event serv">
     <h5>Special event</h5><p class="lead">PVP / PVE</p>
     <a href="#" class="btn btn-sm btn-secondary">Infos</a>
     <a href="#" class="btn btn-sm btn-primary">Mods</a>
     </div>
    </div>
  </div>
</div><!--/event serv-->

 <div class="col-6"><!--island serv-->
  <div class="card">
    <div class="card bg-inverse">

     <div class="card-block card-inverse island serv">
     <h5>The island</h5><p class="lead">PVE x 3</p>
     <a href="#" class="btn btn-sm btn-secondary">Infos</a>
     <a href="#" class="btn btn-sm btn-primary">Mods</a>
     </div>
    </div>
  </div>
 </div><!--/island serv-->

 <div class="col-3"><!--scorched serv-->
  <div class="card">
    <div class="card bg-inverse">
     <div class="card-block card-inverse scorched serv">
     <h5>Scorched earth</h5><p class="lead">PVE x 3</p>
     <a href="#" class="btn btn-sm btn-secondary">Infos</a>
     <a href="#" class="btn btn-sm btn-primary">Mods</a>
     </div>
    </div>
  </div>                                
</div><!--/scorched serv--> 
</div>

CSS:

.event{background-image: url(https://images2.alphacoders.com/819/819763.jpg);background-size:cover;background-position: center;}

    .island{
    background-image: url(https://s-media-cache-ak0.pinimg.com/originals/3b/91/6b/3b916b8b33b7aa08bf8fb920be2aa536.jpg);
    background-size:cover;
    background-position: center;
    }

    .scorched{
    background-image: url(https://images4.alphacoders.com/819/819770.jpg);
    background-size:cover;
    background-position: center;}

    .card{overflow:hidden;}

    .serv{position:relative;}

    .serv:hover{transform:scale(1.1);transition:all 0.7s;}

有人知道我的问题出在哪里吗？非常感谢!

Answer 1

如果你只想缩放图像，移动background到::after .serv 的伪元素, 给伪元素一个负数 z-index所以它在文本后面，定位伪元素 absolute ly，将过渡移至.serv::after而不是仅在 :hover 上.serv 的伪类, 和火 transform: scale()在 .serv::after而不是 .serv .

.event::after {
  background-image: url(https://images2.alphacoders.com/819/819763.jpg);
  background-size: cover;
  background-position: center;
}

.island::after {
  background-image: url(https://s-media-cache-ak0.pinimg.com/originals/3b/91/6b/3b916b8b33b7aa08bf8fb920be2aa536.jpg);
  background-size: cover;
  background-position: center;
}

.scorched::after {
  background-image: url(https://images4.alphacoders.com/819/819770.jpg);
  background-size: cover;
  background-position: center;
}

.card {
  overflow: hidden;
}

.serv {
  position: relative;
}

.serv::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  transition: transform 0.7s;
}

.serv:hover::after {
  transform: scale(1.1);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="card-deck row">

    <div class="col-3">
      <!--event serv-->
      <div class="card">
        <div class="card bg-inverse">
          <div class="card-block card-inverse event serv">
            <h5>Special event</h5>
            <p class="lead">PVP / PVE</p>
            <a href="#" class="btn btn-sm btn-secondary">Infos</a>
            <a href="#" class="btn btn-sm btn-primary">Mods</a>
          </div>
        </div>
      </div>
    </div>
    <!--/event serv-->

    <div class="col-6">
      <!--island serv-->
      <div class="card">
        <div class="card bg-inverse">

          <div class="card-block card-inverse island serv">
            <h5>The island</h5>
            <p class="lead">PVE x 3</p>
            <a href="#" class="btn btn-sm btn-secondary">Infos</a>
            <a href="#" class="btn btn-sm btn-primary">Mods</a>
          </div>
        </div>
      </div>
    </div>
    <!--/island serv-->

    <div class="col-3">
      <!--scorched serv-->
      <div class="card">
        <div class="card bg-inverse">
          <div class="card-block card-inverse scorched serv">
            <h5>Scorched earth</h5>
            <p class="lead">PVE x 3</p>
            <a href="#" class="btn btn-sm btn-secondary">Infos</a>
            <a href="#" class="btn btn-sm btn-primary">Mods</a>
          </div>
        </div>
      </div>
    </div>
    <!--/scorched serv-->
  </div>
</div>

或者，如果您使用的是 bootstrap 4，请输入 .serv一个z-index所以它在.card.bg-inverse之上因为这将分配一个深色背景颜色并覆盖 .serv::after background图像。

.event::after {
  background-image: url(https://images2.alphacoders.com/819/819763.jpg);
  background-size: cover;
  background-position: center;
}

.island::after {
  background-image: url(https://s-media-cache-ak0.pinimg.com/originals/3b/91/6b/3b916b8b33b7aa08bf8fb920be2aa536.jpg);
  background-size: cover;
  background-position: center;
}

.scorched::after {
  background-image: url(https://images4.alphacoders.com/819/819770.jpg);
  background-size: cover;
  background-position: center;
}

.card {
  overflow: hidden;
}

.serv {
  position: relative;
  z-index: 1;
}

.serv::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  transition: transform 0.7s;
}

.serv:hover::after {
  transform: scale(1.1);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="card-deck row">

    <div class="col-3">
      <!--event serv-->
      <div class="card">
        <div class="card bg-inverse">
          <div class="card-block card-inverse event serv">
            <h5>Special event</h5>
            <p class="lead">PVP / PVE</p>
            <a href="#" class="btn btn-sm btn-secondary">Infos</a>
            <a href="#" class="btn btn-sm btn-primary">Mods</a>
          </div>
        </div>
      </div>
    </div>
    <!--/event serv-->

    <div class="col-6">
      <!--island serv-->
      <div class="card">
        <div class="card bg-inverse">

          <div class="card-block card-inverse island serv">
            <h5>The island</h5>
            <p class="lead">PVE x 3</p>
            <a href="#" class="btn btn-sm btn-secondary">Infos</a>
            <a href="#" class="btn btn-sm btn-primary">Mods</a>
          </div>
        </div>
      </div>
    </div>
    <!--/island serv-->

    <div class="col-3">
      <!--scorched serv-->
      <div class="card">
        <div class="card bg-inverse">
          <div class="card-block card-inverse scorched serv">
            <h5>Scorched earth</h5>
            <p class="lead">PVE x 3</p>
            <a href="#" class="btn btn-sm btn-secondary">Infos</a>
            <a href="#" class="btn btn-sm btn-primary">Mods</a>
          </div>
        </div>
      </div>
    </div>
    <!--/scorched serv-->
  </div>
</div>