How to Design a CSS Card Flip Animation: Creating Flipping Cards on Hover

#html #css #webdev #beginners

OUTLINE

Introduction
Prerequisite
Step-by-step guide on how to design a CSS card flip animation on hover
Conclusion

Introduction

CSS animations are used for adding interactivity and visual effects to elements on a web page. It provides a way to improve the user experience and aesthetics of a website.

In this article, we will explore how to design a CSS card flip animation that allows cards to flip and show additional content on hover.

Prerequisite

HTML
CSS

Step-by-step guide on how to design a CSS card flip animation on hover

STEP 1: Create the HTML structure

In this step, we will start by setting up the basic HTML structure for the flipping cards, each card consists of the front side and back side.

Here is the code example:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flipping Cards on Hover</title>

    <!-- Google font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

    <!-- CSS Stylesheet -->
    <link rel="stylesheet" href="./src/styles.css">

    <!-- Font awesome -->
    <script src="https://kit.fontawesome.com/8ea8d3b22a.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="card-section">

        <div>
            <h1 class="card-title">Meet Our Exceptional Team Members</h1>
            <p class="card-subtitle">Discover the dedicated individuals who collaborate seamlessly, leveraging their diverse skills and experience to drive our company's growth. </p>
         </div>

        <div class="flipping-cards">

            <div class="profile-card first-profile-card">

                <div class="profile-card-front profile-card-face">      
                    <img src="./images/olivia-johnson.jpg" alt="profile-picture" class="profile-picture"/>

                    <h2 class="name">Olivia Johnson</h2>
                    <h3 class="role">Software Engineer</h3>

                    <div class="expertise-section">
                        <p class="expertise-title">Areas of Expertise</p>
                        <ul>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">JavaScript</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">React Ecosystem</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Web Accessibility</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Performance Optimization</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Agile Methodologies</li>
                        </ul>
                    </div>
                </div>

                <div class="profile-card-back profile-card-face">
                    <div class="about-section">
                        <h2 class="about-title">About</h2>
                        <p class="about-text">
                            Olivia Johnson is a senior software engineer with over 6 years of experience in the technology industry.
                            Throughout her career, Oivia has successfully led numerous complex projects from inception to completion. 
                            She specializes in designing architectures that are scalable, efficient, and aligned with business goals.
                        </p>
                    </div>

                    <div class="interests-section">
                        <p class="interests-title">Key Interests</p>
                        <ul>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Open-source Contribution</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Technology Conferences and Meetups</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Technical Blogging</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Professional Development</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Mentorship and Teaching</li>
                        </ul>
                    </div>

                    <footer>
                        <div class="icons"> 
                            <a href="#"><i class="fa-solid fa-envelope email-icon social-icon"></i></a>
                            <a href="#"><i class="fa-brands fa-linkedin linkedin-icon social-icon"></i></a>
                            <a href="#"><i class="fa-brands fa-square-twitter social-icon"></i></a>
                            <a href="#"><i class="fa-brands fa-square-github social-icon"></i></a>
                        </div>
                    </footer>
                </div>

            </div>

            <div class="profile-card second-profile-card">

                <div class="profile-card-front profile-card-face">      
                    <img src="./images/james-ethan.jpg" alt="profile-picture" class="profile-picture"/>

                    <h2 class="name">Samuel Ethan</h2>
                    <h3 class="role">Product Manager</h3>

                    <div class="expertise-section">
                        <p class="expertise-title">Areas of Expertise</p>
                        <ul>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Product Strategy and Roadmap Development</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Market Research and Analysis</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Agile Product Development</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Product Performance Evaluation</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Product Launch</li>
                        </ul>
                    </div>
                </div>

                <div class="profile-card-back profile-card-face">
                    <div class="about-section">
                        <h2 class="about-title">About</h2>
                        <p class="about-text">
                            James Ethan has a wealth of experience in leading cross-functional teams and a track record of delivering successful products. 
                            He has a unique blend of technical expertise, and user-centric mindset.
                            He is dedicated to driving product excellence and empowering teams to surpass expectations, shaping the future of digital innovation.
                        </p>
                    </div>

                    <div class="interests-section">
                        <p class="interests-title">Key Interests</p>
                        <ul>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Technology and Innovation</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">User Experience</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Product Development</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Customer Advocacy</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Project Management</li>
                        </ul>
                    </div>

                    <footer>
                        <div class="icons"> 
                            <a href="#"><i class="fa-solid fa-envelope email-icon social-icon"></i></a>
                            <a href="#"><i class="fa-brands fa-linkedin linkedin-icon social-icon"></i></a>
                            <a href="#"><i class="fa-brands fa-square-twitter social-icon"></i></a>
                        </div>
                    </footer>
                </div>

            </div>

            <div class="profile-card third-profile-card">

                <div class="profile-card-front profile-card-face">      
                    <img src="./images/grace-victoria.png" alt="profile-picture" class="profile-picture"/>

                    <h2 class="name">Grace Victoria</h2>
                    <h3 class="role">Data Scientist</h3>

                    <div class="expertise-section">
                        <p class="expertise-title">Areas of Expertise</p>
                        <ul>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Statistical Modeling and Analysis</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Data Mining and Data Extraction</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Data Visualization</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Big Data Processing</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Machine Learning</li>
                        </ul>
                    </div>
                </div>

                <div class="profile-card-back profile-card-face">
                    <div class="about-section">
                        <h2 class="about-title">About</h2>
                        <p class="about-text">
                            Grace Victoria is a data scientist with over 5 years of experience extracting valuable insights from complex datasets.
                            She has a profound knowledge of advanced statistical modeling, machine learning algorithms, and data visualization 
                            techniques has enabled her to drive transformative solutions for complex business challenges.
                        </p>
                    </div>

                    <div class="interests-section">
                        <p class="interests-title">Key Interests</p>
                        <ul>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Artificial Intelligence</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Data Analysis</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Data Ethics</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Natural Language Processing</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Business Strategy and Impact</li>
                        </ul>
                    </div>

                    <footer>
                        <div class="icons"> 
                            <a href="#"><i class="fa-solid fa-envelope email-icon social-icon"></i></a>
                            <a href="#"><i class="fa-brands fa-linkedin linkedin-icon social-icon"></i></a>
                            <a href="#"><i class="fa-brands fa-square-twitter social-icon"></i></a>
                            <a href="#"><i class="fa-brands fa-square-github social-icon"></i></a>
                        </div>
                    </footer>
                </div>

            </div>

        </div>

    </div>

</body>
</html>

STEP 2: Add the CSS styles

In this step, we'll style the cards using CSS.



*{
    box-sizing: border-box;
    margin: 0;
 }

 html{
    font-size: 62.5%;
 }

 body{
    font-family: 'Inter', sans-serif;
    background-color: #23252C; 
    color: #ffff;
 } 

 ul,
 li {
    list-style: none;
    margin: 0;
    padding: 0;
}

 a {
    text-decoration: none;
    color: inherit;
}

.card-section {
    padding-top: 3rem;
}

.card-title {
    font-size: 3.5rem;
    padding-bottom: 1.5rem;
    text-align: center;
 }

 .card-subtitle {
    font-size: 1.4rem;
    line-height: 1.8;
    text-align: center;
 }

 .flipping-cards {
   padding: 2rem 0;
   margin: 0 auto;
   width: 100%;
   max-width: 1100px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-column-gap: 60px;
 }


/* Profile card front */

.profile-card {
   height: 52rem;
   position: relative;
   perspective: 150rem;
   -moz-perspective: 150rem;
 }

.profile-card-face {
   background-color: #1A1B21;
   color: #FFFFFF;
   width: 320px;
   margin: 30px auto;
   border-radius: 10px;
   transition: all .8s ease;
   position: absolute;
   top: 0;
   left: 0;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   overflow: hidden;
}

.profile-card-back{
   transform: rotateY(180deg);
}

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

.profile-card:hover .profile-card-back {
   transform: rotateY(0);
}

/* Profile card front */

.profile-picture {
   width: 320px;
   max-height: 210px;
   border-radius: 10px 10px 0 0;
}

.name{
   font-weight: 700;
   font-size: 2.2rem;
   text-align: center;
   color: #FFFFFF;
   padding-top: 2rem;
   padding-bottom: 0.6rem;
 }

 .role{
   font-weight: 400;
   font-size: 1.4rem;
   text-align: center;
   color: #F3BF99;
   margin: 0px
 }

 .expertise-section {
    padding: 0 3.5rem 2rem;
 }

 .expertise-title {
    font-weight: 700;
    font-size: 1.5rem;
    color: #FFFFFF;
    margin-top: 2.8rem;
    margin-bottom: 2rem;
 }

 .expertise {
   font-size: 1rem;
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 1rem;
 }


/* Profile card back */ 

.about-section{
   padding: 0 4rem;
}

.about-title {
   font-weight: 700;
   font-size: 1.6rem;
   color: #ffff;
   padding-top: 3rem;
   padding-bottom: 0.8rem;
}

.about-text {
   font-style: normal;
   text-align: justify;
   font-weight: 400;
   font-size: 1.2rem;
   line-height: 1.6;
   color: #ffff;
}

.interests-section {
   padding: 0 3.5rem 2rem;
}

.interests-title {
   font-weight: 700;
   font-size: 1.5rem;
   color: #FFFFFF;
   margin-top: 2.5rem;
   margin-bottom: 2rem;
}

.interest {
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
}

 footer{
    width: 320px;
    height: 55px;
    background: #161619;
    border-radius: 0px 0px 10px 10px;
    padding: 18px 72px 22px;
 }

 .icons{
     display: flex;
     justify-content: space-between;
 }

 .social-icon{
    font-size: 20px;
    color: #918E9B;
    align-items: center;
 }

 .social-icon:hover{
   color: #FFFFFF;
 }

@media screen and (max-width: 1200px) { 

.card-subtitle {
   font-size: 1.4rem;
   padding: 0 10rem;
}

.flipping-cards {
   margin-bottom: 5rem;
   width: 100%;
   max-width: 700px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: 1fr;
   grid-column-gap: 60px;
   grid-row-gap: 30px;
}

.third-profile-card {
   justify-items: center;
   align-items: center;
}
}

@media screen and (max-width: 700px) { 

.card-title {
   font-size: 3rem;
   padding-left: 2rem;
   padding-right: 2rem;
 }

 .card-subtitle {
    font-size: 1.4rem;
    padding: 0 6rem;
 }

 .flipping-cards {
   margin-bottom: 5rem;
   width: 100%;
   max-width: 300px;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: repeat(3, 1fr);
   grid-column-gap: 60px;
   grid-row-gap: 30px;
 }

 }

 @media screen and (max-width: 450px) { 

.card-title {
   font-size: 3rem;
   padding-left: 2rem;
   padding-right: 2rem;
}

.card-subtitle {
   font-size: 1.2rem;
   padding: 0 3rem;
}

.flipping-cards {
   margin-bottom: 5rem;
   width: 100%;
   max-width: 320px;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: repeat(3, 1fr);
   grid-column-gap: 60px;
   grid-row-gap: 30px;
}

}

In the above code, we set the perspective property on the .profile-card container to create a 3D space for the flipping animation. We also ensure that the front and back faces are absolutely positioned within the card container, and stacked on top of each other.

We set the backface-visibility property to hidden to ensure the card's back face is not visible until it is flipped. We will use the .profile-card:hover pseudo-class to trigger the flip animation on hover. When hovering over a card, we'll apply a transform property to rotate the card along the Y-axis.

We create a card flip animation effect where the card's front face is initially visible, and when hovered over, it smoothly rotates and reveals the card's back face. When the hover state is removed, the card returns to its original front-face display.

Links

GitHub Link

Live Link

Conclusion

In this article, we explored how to design a CSS card flip animation which allows the cards to flip on hover. We achieved this by using CSS transitions, transforms, and pseudo-classes to add interactivity and visual appeal to our design.