Creating a Card Component That Flips on Hover

A card component that flips on hover is a great way to showcase content in a compact and engaging format. Let's break down the structure, styles, and functionality to help you implement your own card with this effect.

HTML Structure

First, set up the basic HTML structure for your card. This involves defining a container for the card and two sides: the front and back.

  <div class="card">
      <div class="card-front">
        <img width="100%" height="100%" src="Your Image Here.png" alt="" />
      </div>
      <div class="card-back">
        <h1>New York</h1>
        <p>The city that never sleeps</p>
      </div>
    </div>

CSS Styles

Next, Apply styles to your card to achieve the desired effect.

Basic Card Style

.card {
  width: 400px;
  height: 600px;
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
}

Here The card class defines the dimensions of the card and establishes a 3D perspective. While perspective determines how the depth of the scene is perceived, transform-style: preserve-3d; keeps the 3D transformations of the child elements intact. When you rotate or transform the parent element, the child elements maintain their 3D positioning relative to the parent.

Front and Back Faces

.card-front,
.card-back {
   width: 100%;
   height: 100%;
   position: absolute;
   transition: transform 3s cubic-bezier(0.4, 0.2, 0.2, 1);
   backface-visibility: hidden;
}

The .card-front and .card-back classes define the two sides of the card. Both sides include a smooth 3-second rotation transition. The backface-visibility property is hidden to prevent the reverse side from being visible when flipped.

.card-front {
    transform: rotateY(0deg);
}

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

Also, while .card-front initially has no rotation (rotateY(0deg)), card-back is rotated 180 degrees initially to remain hidden.

Hover Effect

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

This is where magic happens. When the card is hovered over, the .card-back rotates to 0 degrees, and .card-front rotates to -180 degrees, creating the flip effect.

Tips for Customization

• Timing Adjustments: To speed up or slow down the flip, adjust the transition duration in .card-front and .card-back.
• Card Content: Change images, text, and font styles to suit different design needs.
• Responsive Design: For mobile optimization, consider adjusting the card width and height based on screen size.

Conclusion

By following these steps, you can create a visually striking parallax flip card that enhances user interaction on your website. This simple yet effective design can be customized with different images, texts, and styles to fit your project's aesthetic. Incorporate this card into your web design for a modern and engaging user experience!

Thank you for reading.