我是网络开发的新手，有这个问题。为此，我创建了一个Codepen
对于这6张卡片，我想做一张图片的广告。当我将鼠标悬停在图像上时，它应该交换卡并显示内容。因此，当前三张牌交换时，它仍然显示一个图像，而不是前三张卡下的内容。
所以我的想法是：当我把鼠标悬停在一张图片上时，它应该交换卡片，只显示一个白色背景，内容是三张下面的卡片。
有人能在这里帮我怎么做吗？
.services .icon-box {
text-align: center;
border: 1px solid #e2eefd;
padding: 80px 20px;
transition: all ease-in-out 0.3s;
}
.services .icon-box .icon {
margin: 0 auto;
width: 64px;
height: 64px;
background: #f1f6fe;
border-radius: 4px;
border: 1px solid #deebfd;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: ease-in-out 0.3s;
}
.services .icon-box .icon i {
color: #3b8af2;
font-size: 28px;
transition: ease-in-out 0.3s;
}
.services .icon-box h4 {
font-weight: 700;
margin-bottom: 15px;
font-size: 24px;
}
.services .icon-box h4 a {
color: #222222;
transition: ease-in-out 0.3s;
}
.services .icon-box p {
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
margin-top: 0;
}
.services .icon-box:hover {
border-color: #fff;
box-shadow: 0px 0 25px 0 rgba(16, 110, 234, 0.1);
}
.services .icon-box:hover h4 a, .services .icon-box:hover .icon i {
color: #106eea;
}
.services .icon-box:hover .icon {
border-color: #106eea;
}
.flip-card {
background-color: transparent;
height: 337px;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.align-items-stretch:hover .flip-card-front {
display: none;
}
.flip-card-inner{
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
background-size: cover;
background-repeat: no-repeat;
}
.flip-card-front, .flip-card-back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-back {
color: black;
transform: rotateY(180deg);
}
.flip-card:last-child {
margin-bottom: 0;
}<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<section id="services" class="services">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Lorem</h2>
<h3>Lorem <span>.</span></h3>
<p>Praesent in dui nec lorem vulputate hendrerit quis vel nisl. Aenean at auctor augue. Vivamus facilisis pretium suscipit. Praesent nec turpis pellentesque elit iaculis tristique et at justo. Pellentesque feugiat, leo nec rutrum aliquam, dui est pulvinar diam, ut elementum velit nibh vitae ipsum. Morbi id lacinia risus. Etiam faucibus erat ac nibh aliquet laoreet. Sed velit ante, auctor sed imperdiet id, elementum a justo. Nullam condimentum metus vitae porttitor tincidunt.</p>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 d-flex align-items-stretch flip-card" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box flip-card-inner" style="background-image: url('https://images.unsplash.com/photo-1611095790444-1dfa35e37b52?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80');">
<div class="flip-card-front">
<div class="icon"><i class="bx bxs-user-account"></i></div>
<h4><a href="" style="color: white;">Lorem</a></h4>
</div>
<div class="flip-card-back">
<p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices, tellus in ullamcorper sodales, felis dui condimentum dolor, quis feugiat nunc mi nec turpis. Proin convallis ultrices quam et condimentum.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0 flip-card" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box flip-card-inner" style="background-image: url('https://images.unsplash.com/photo-1560732488-6b0df240254a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80');">
<div class="flip-card-front">
<div class="icon"><i class="bx bx-server"></i></div>
<h4><a href="" style="color: white;">Lorem</a></h4>
</div>
<div class="flip-card-back">
<p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices, tellus in ullamcorper sodales, felis dui condimentum dolor, quis feugiat nunc mi nec turpis. Proin convallis ultrices quam et condimentum.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0 flip-card" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box flip-card-inner" style="background-image: url('https://images.unsplash.com/photo-1454779132693-e5cd0a216ed3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80');">
<div class="flip-card-front">
<div class="icon"><i class="bx bx-network-chart"></i></div>
<h4><a href="" style="color: white;">Lorem</a></h4>
</div>
<div class="flip-card-back">
<p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices, tellus in ullamcorper sodales, felis dui condimentum dolor, quis feugiat nunc mi nec turpis. Proin convallis ultrices quam et condimentum..</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 flip-card" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box flip-card-inner" style="text-align: center;">
<div class="flip-card-front">
<div class="icon"><i class="bx bx-world"></i></div>
<h4><a href="">Lorem</a></h4>
</div>
<div class="flip-card-back">
<p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices, tellus in ullamcorper sodales, felis dui condimentum dolor, quis feugiat nunc mi nec turpis. Proin convallis ultrices quam et condimentum.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 flip-card" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box flip-card-inner" style="text-align: center;">
<div class="flip-card-front">
<div class="icon"><i class="bx bx-star"></i></div>
<h4><a href="">Lorem</a></h4>
</div>
<div class="flip-card-back">
<p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices, tellus in ullamcorper sodales, felis dui condimentum dolor, quis feugiat nunc mi nec turpis. Proin convallis ultrices quam et condimentum.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 flip-card" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box flip-card-inner" style="text-align: center;">
<div class="flip-card-front">
<div class="icon"><i class="bx bx-coin-stack"></i></div>
<h4><a href="">Lorem</a></h4>
</div>
<div class="flip-card-back">
<p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices, tellus in ullamcorper sodales, felis dui condimentum dolor, quis feugiat nunc mi nec turpis. Proin convallis ultrices quam et condimentum.</p>
</div>
</div>
</div>
</div>
</div>
</section>非常感谢！
当您展示卡片背面时，需要隐藏图像。对于给定的代码，最简单的方法是将背景的大小设置为0。
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
background-size: 0; /* Added to hide the background image. */
}