Neumorphism Card Design With Hover Animation Using HTML CSS

Today In this article, we’ll show you how to create Neumorphism Cards Design With Hover Effect Using HTML & CSS. Previously I have created many types of Cards Design. Now, I will create different type. This type of Neumorphism Cards With Hover Effect is used on websites For display content that contains different details. This kind of Dark Cards With Hover Effects looks attractive on website.

You easily create these Neumorphism Cards with Hover Effect Using HTML & CSS. then this article will definitely help you. For this, you need to have an idea about basic HTML & CSS then you can understand the following codes. It is designed in a completely modern way.

Some Information About This Neumorphism Card Design

In this design [Hover Animation Card Design], on the webpage, there are three cards arranged side by side. When you hover on the card, it moves with a smooth transition. The cards have a Number, Title, text & button. All over the color is Dark.

Preview Of CSS Card Hover Animation

See this video preview to get an idea of how this Neumorphism Card Hover effect looks like.

css  card design

Hopefully, the above demo has helped you to create this CSS Card Hover Animation Tutorial. If you like the video, be sure to like the video and comment on it so I can encourage you to create new designs.

You might like this:

CSS Card Hover Animation | Source Codes

To create this program (CSS Card Design). First, you need to create three Files one HTML and CSS File. After creating these files just paste the following codes in your file. 

After create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.

HTML CODE:

<!DOCTYPE html>
<!-- Created By Codecary -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Card Hover Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  
   <div class="container">
    <div class="card">
      <div class="box">
        <div class="content">
          <h2>01</h2>
          <h3>Card One</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar 
             non nunc dictum commodo. Curabitur non fermentum dolor. Sed ornare.</p>
          <a href="#">Read More</a>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="box">
        <div class="content">
          <h2>02</h2>
          <h3>Card Two</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar 
             non nunc dictum commodo. Curabitur non fermentum dolor. Sed ornare.</p>
          <a href="#">Read More</a>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="box">
        <div class="content">
          <h2>03</h2>
          <h3>Card Three</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar 
             non nunc dictum commodo. Curabitur non fermentum dolor. Sed ornare.</p>
          <a href="#">Read More</a>
        </div>
      </div>
    </div>
  </div>
  
</body>
</html>

After to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

CSS CODE:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  min-height: 100vh;
  background: #232427;
}

.container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 40px 0;
}

.container .card{
  position: relative;
  min-width: 320px;
  height: 440px;
  box-shadow: inset 5px 5px 5px rgba(0,0,0,0.2),
              inset -5px -5px 15px rgba(255,255,255,0.1),
              5px 5px 15px rgba(0,0,0,0.3),
              -5px -5px 15px rgba(255,255,255,0.1);
  border-radius: 15px;
  margin: 30px;
}

.container .card .box {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: #2a2b2f;
  border: 2px solid #1e1f23;
  border-radius: 15px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  transition: 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.container .card .box::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,0.05);
  pointer-events: none;
}

.container .card .box:hover{
  transform: translateY(-50px);
  box-shadow: 0 40px 70px rgba(0,0,0,0.5);
}

.container .card .box .content{
  padding: 20px;
  text-align: center;
}

.container .card .box .content h2{
  position: absolute;
  top: -10px;
  right: 30px;
  font-size: 8em;
  color: rgba(255,255,255,0.05);
}

.container .card .box .content h3{
  font-size: 1.8em;
  color: rgba(255,255,255,0.5);
  z-index: 1;
  transition: 0.5s;
}

.container .card .box .content p{
  font-size: 1em;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  z-index: 1;
  transition: 0.5s;
}

.container .card .box .content a{
  position: relative;
  display: inline-block;
  padding: 8px 20px;
  background: #000;
  margin-top: 15px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 400;
  color: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.container .card:nth-child(1) .box .content a{
  background: #2196f3;
}

.container .card:nth-child(2) .box .content a{
  background: #e91e63;
}

.container .card:nth-child(3) .box .content a{
  background: #97dc47;
}

now you’ve successfully created these CSS Card Hover Animation. If your code does not work or facing any error/problem to comment down or contact us through the contact page.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Categories