如何解决如何在 HTML 中翻转卡片
我是网络开发新手，遇到了这个问题。为此，我创建了一个 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.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,500,500i,700i|Poppins:300,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,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,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,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,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,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. */
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
