I am new to webdevelopment and have this issue. For this I created a Codepen
For the 6 cards I wanted to ad an image. When I hover over the image it should swap the card and show content. So when the first three cards swaps it still shows up an image instead of the content as the under the first three cards.
So my idea is: when I hover over an image it should swap the card and show only a white background with content as the under three cards.
Can anyone assist me here on how to do it?
.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>Thank you very much!
You need to hide the image when you show the back of the card. The easiest way to your given code is to set the size of the background to 0.
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
background-size: 0; /* Added to hide the background image. */
}