求助：WordPress环境下CSS Grid中Flip Card悬停效果适配问题

问题背景 #

在WordPress中使用Beaver Builder搭配Astra Pro主题，基于网上代码修改后，尝试在repeat(7, 1fr)的CSS Grid布局内实现hover翻转卡片效果，遇到以下问题：

• 父容器.card无法使用height:100%，只能设置固定高度（当前200px），否则翻转效果失效；固定高度不仅限制悬触范围，还导致盒子尺寸错乱
• 给子盒子添加2:3影视海报比例后，一行仅显示6个盒子，达不到预期的7个
• 仅第一行7个盒子应用了效果，存在图片裁剪、需hover到卡片中间才触发翻转的问题

问题根源分析 #

• 翻转卡片依赖perspective和绝对定位，父容器用height:100%时，若祖先容器没有明确高度，会导致高度塌陷，直接破坏翻转效果的触发条件
• .card的margin:50% auto会额外占用水平空间，导致Grid布局的列宽计算超出预期，每行容纳的盒子数量减少
• 卡片触发hover的区域仅为设置了固定高度的部分，超出该范围的区域无法触发翻转

修复方案 #

调整CSS代码 #

/* 父卡片容器：用padding-top实现2:3比例，移除冗余margin */
.card {
  width: 100%;
  /* padding-top实现2:3比例（3/2=150%），自适应Grid列宽 */
  padding-top: 150%;
  margin: 0;
  perspective: 1000px;
  cursor: pointer;
  border: 0;
  position: relative; /* 让内部绝对定位元素基于此容器 */
}

/* 卡片内部容器：绝对定位填满父容器 */
.card-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-front {
  background-color: rgba(0, 0, 0, 0);
  border: 0;
}

/* 解决图片裁剪问题 */
.card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-back {
  background-color: rgba(0, 0, 0, 0.52);
  color: white;
  transform: rotateY(180deg);
}

修改说明：

• 用padding-top:150%替代固定高度，实现2:3的影视海报比例，同时让卡片高度自适应Grid列宽
• 给.card添加position:relative，确保内部绝对定位的.card-inner能填满整个卡片区域，hover时触发范围覆盖全卡片
• 移除.card的margin:50% auto，避免占用额外水平空间，保证Grid每行能放下7个盒子
• 给.card-front内的图片添加object-fit:cover，避免图片裁剪变形

调整HTML结构 #

确保海报图片正确嵌入到卡片正面：

<div class="card">
  <div class="card-inner">
    <div class="card-front">
      <!-- 替换为你的海报图片链接 -->
      <img src="海报图片URL" alt="海报描述">
    </div>
    <div class="card-back"><strong>SERVICES & PRODUCTS</strong></div>
  </div>
</div>

Grid布局补充检查 #

确保Grid父容器的样式正确，用gap控制卡片间距：

/* Grid父容器示例 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px; /* 用gap设置卡片间距，比margin更稳定 */
}

内容的提问来源于stack exchange，提问作者S. Sparks