Home > 3d card animation > Card Animation > Css Animation > 3D Card Hover Effect with HTML and CSS

3D Card Hover Effect with HTML and CSS

October 16, 2023 , ,

 Want to make a 3D card animation ?

this is a sample picture how this animation works.






See Video :



This is the sample video how the animation is live look .

To Create this CSS Animation we have to follow some steps which is given below : 


1.  HTML Code: 


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Card 3d aniamtion | untoldcoding</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
   
    <a href="#" alt="Mythrill" target="_blank">
      <div class="card">
        <div class="wrapper">
          <img src="./imh/main.jpg" class="cover-image" />
        </div>
        <img src="./imh/title1.png" class="title" />
        <img src="./imh/main2.png" class="character" />
      </div>
    </a>

    <a href="#" alt="Mythrill" target="_blank">
      <div class="card">
        <div class="wrapper">
          <img src="./imh/main4.png" class="cover-image" />
        </div>
        <img src="./imh/title2.png" class="title" />
        <img src="./imh/main3.png" class="character" />
      </div>
    </a>
  </body>
</html>


this is html code you can copied and paste in your IDE .  HTML file name should be index.html .


2. CSS Code

the file name should be Style.css

:root {
  --card-height: 300px;
  --card-width: calc(var(--card-height) / 1.5);
}
* {
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1e1e20;
}
.card {
  width: var(--card-width);
  height: var(--card-height);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 36px;
  perspective: 2500px;
  margin: 0 50px;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wrapper {
  transition: all 0.5s;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.card:hover .wrapper {
  transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
  box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 35px 32px -8px rgba(197, 59, 59, 0.75);

  filter: blur(2px);
}

.wrapper::before,
.wrapper::after {
  content: "";
  opacity: 0;
  width: 100%;
  height: 80px;
  transition: all 0.5s;
  position: absolute;
  left: 0;
}
.wrapper::before {
  top: 0;
  height: 100%;
  background-image: linear-gradient(
    to top,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
}
.wrapper::after {
  bottom: 0;
  opacity: 1;
  background-image: linear-gradient(
    to bottom,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
}

.card:hover .wrapper::before,
.wrapper::after {
  opacity: 1;
}

.card:hover .wrapper after {
  height: 120px;
}
.title {
  width: 100%;
  transition: transform 0.5s;
}
.card hover title {
  transform: translate3d(0%, -50px, 100px);
}
.character {
  width: 100%;
  opacity: 0;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
}
.card hover .character {
  opacity: 1;
  transform: translate3d(0%, -30%, 100px);
}


you have to add both the files and replace img with your img.

Want to see Live Demo : Click here

Join our telegram group for more details : click here



In this Animation we use a Card div in html

<a href="#" alt="Mythrill" target="_blank">
      <div class="card">
        <div class="wrapper">
          <img src="./imh/main.jpg" class="cover-image" />
        </div>
        <img src="./imh/title1.png" class="title" />
        <img src="./imh/main2.png" class="character" />
      </div>
    </a>



you can add multiple card numbers just copy and paste the above code



Then We use CSS classes which is:

.card {
  width: var(--card-width);
  height: var(--card-height);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 36px;
  perspective: 2500px;
  margin: 0 50px;
}



FAQs (Frequently Asked Questions) on 3D Card Hover Effect with HTML and CSS

1. What is a 3D Card Hover Effect?

A 3D Card Hover Effect is a visual enhancement applied to HTML elements, typically cards, using CSS to create the illusion of depth and dimensionality when hovered over by a cursor. It adds an interactive and engaging element to web design by giving cards a three-dimensional appearance.

2. How does the 3D Card Hover Effect work?

The 3D Card Hover Effect utilizes CSS transitions and transforms to manipulate the position, scale, and rotation of HTML elements. When a user hovers over a card, CSS properties such as transform and transition are applied to create the illusion of the card lifting and rotating in a three-dimensional space.

3. What are the key components required to create a 3D Card Hover Effect?

To create a 3D Card Hover Effect, you'll need:

  • HTML structure: Defines the content of the card and its container.
  • CSS styling: Applies the visual appearance, positioning, and initial transformations to the card.
  • CSS transitions: Specifies the timing and duration of the hover effect.
  • CSS transforms: Manipulates the scale, rotation, and perspective of the card during the hover interaction.
  • Hover states: Triggered by user interaction, activating the 3D effect when the cursor hovers over the card.

4. Can the 3D Card Hover Effect be applied to various types of cards?

Yes, the 3D Card Hover Effect can be applied to various types of cards, including image cards, product cards, portfolio items, and more. The effect enhances the visual presentation of cards, making them more interactive and appealing to users.

5. Is JavaScript required to create a 3D Card Hover Effect?

No, JavaScript is not required to create a basic 3D Card Hover Effect. The effect can be achieved solely using HTML and CSS. However, JavaScript can be optionally used to add more advanced interactions or dynamic behaviors to the cards, such as toggling classes or triggering animations.

6. How customizable is the 3D Card Hover Effect?

The 3D Card Hover Effect is highly customizable, allowing designers to tailor the appearance and behavior of the cards to suit their specific design requirements. CSS properties such as transform, transition, box-shadow, and background-color can be adjusted to change the appearance, animation speed, and style of the cards.

7. Are there any performance considerations when implementing the 3D Card Hover Effect?

While the 3D Card Hover Effect adds visual flair to web design, it's essential to consider performance implications, especially on older devices or browsers. Optimize the CSS transitions and transformations to ensure smooth rendering and avoid excessive use of effects that could impact page load times.

8. Can the 3D Card Hover Effect be combined with other hover effects or animations?

Yes, the 3D Card Hover Effect can be combined with other hover effects or animations to create more complex and dynamic interactions. For example, transitions can be applied to text or image elements within the card to reveal additional content or create layered effects, enhancing the overall user experience.

9. How can I ensure cross-browser compatibility when using the 3D Card Hover Effect?

To ensure cross-browser compatibility, test the 3D Card Hover Effect across different web browsers and devices, addressing any inconsistencies or rendering issues. Utilize vendor prefixes and fallbacks where necessary and consider using CSS frameworks or libraries that offer built-in support for CSS transitions and transforms.

10. Are there any resources or tutorials available for creating the 3D Card Hover Effect?

Yes, there are numerous tutorials, code snippets, and resources available online that demonstrate how to create the 3D Card Hover Effect using HTML and CSS. These resources often provide step-by-step instructions, code examples, and live demos to help you understand and implement the effect in your own projects.

Post a Comment

1 comment:

Subscribe to: Post Comments ( Atom )
Powered by Blogger.