Html 在引导卡中转换图像

这里是我的问题，我已经成功地编码我的引导卡，因为我希望，但一个小细节让我伤心

我想确保“变换比例”不考虑“信息”和“模块”按钮

只有我能搔搔我的头，尝试各种我无法摆脱这关的事情

下面是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>

有人知道我的问题来自哪里吗？多谢各位

---

使用：not（a）in.serv进行翻译。这应该行。

如果您只想缩放图像，请将

背景移动到
：在
.serv的
伪元素之后，给伪元素一个负数
z-index
，使其位于文本后面，将伪元素
绝对
定位，将转换移到
.serv:：after
上，而不是仅在
上：悬停
.serv
的伪类，并在
.serv:：after上激发
转换：scale（）
，而不是
.serv
上


.event:：after{
背景图片：url(https://images2.alphacoders.com/819/819763.jpg);
背景尺寸：封面；
背景位置：中心；
}
.岛：：之后{
背景图片：url(https://s-media-cache-ak0.pinimg.com/originals/3b/91/6b/3b916b8b33b7aa08bf8fb920be2aa536.jpg);
背景尺寸：封面；
背景位置：中心；
}
烧焦的{
背景图片：url(https://images4.alphacoders.com/819/819770.jpg);
背景尺寸：封面；
背景位置：中心；
}
.卡片{
溢出：隐藏；
}
.服务{
位置：相对位置；
}
.serv：：之后{
内容：''；
位置：绝对位置；
顶部：0；左侧：0；右侧：0；底部：0；
z指数：-1；
转变：转变0.7s；
}
.serv:hover:：after{
转换：比例（1.1）；
}

特别活动
PVP/PVE

岛
PVE x 3

焦土
PVE x 3

其他文本呢？想要它也保持静止，只缩放背景图像吗？还是要缩放其他文本？您好，仅缩放图像。如果可能，请仅使用bootstrap 4 css。自我最初使用3编写以来，我为您提供了bootstrap 3和4解决方案。您应该更新您的帖子，说明您正在使用bootstrap 4，并且您不只是希望按钮保持静态-您希望卡片中的所有文本都保持静态。谢谢您的回答：）
.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;}