Learn How To Make A Modern Hoverable Card Design Using HTML and CSS

By Bytewebster - December 3, 2022

Detailed Overview of Project

We have given the complete source code of these modern designed cards at the end of this page, you can download it for free. And with this we also made a video tutorial of this project. Please try to download the source code directly, both of these code examples are given below only to explain the code.

First of all we will prepare the structure of these cards.

HTML Structure

This code starts with a div tag which is given a class named Hero. The structure of all the cards is the same, only their styling is different. Then inside the same div tag there is an image tag which will place the image in our card.

And there is another image tag for the logo, we have also placed it inside a div class named logo. After this, we have created three more div tags which we have given class as main-text, date, and hero-btn.

In the first class, we have taken a paragraph tag so that we can write the description of the card in it. And the second class is for a date so that we can mention the date on it. And the last class is for the animated button.

Mainly we have made only 6 cards in the source code that we have provided, if you want, you can make them more or less. You just have to copy-paste the code of any one card. And inside that new card, you just have to change the logo, image, and description.

Till now we have done the work of making the structure of the card by HTML. Now it's time to style these cards by using CSS.

  <div class="first hero">
    <img src="images/image1.jpg" alt="" class="image">
    <div class="text"></div>
    <div class="logo">
      <img src="images/logo.jpg" alt="">
    </div>
    <div class="main-text">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
    <div class="date">
      <p>30.11.2022</p>
    </div>
    <div class="hero-btn">
      <a href="#">Learn More</a>
    </div>
  </div>

  <div class="second hero">
    <img src="images/image2.png" alt="" class="image">
    <div class="text"></div>
    <div class="logo">
      <img src="images/logo.jpg" alt="">
    </div>
    <div class="main-text">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
    <div class="date">
      <p>30.11.2022</p>
    </div>
    <div class="hero-btn">
      <a href="#">Learn More</a>
    </div>
  </div>

  <div class="first hero">
    <img src="images/image1.jpg" alt="" class="image">
    <div class="text"></div>
    <div class="logo">
      <img src="images/logo.jpg" alt="">
    </div>
    <div class="main-text">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
    <div class="date">
      <p>30.11.2022</p>
    </div>
    <div class="hero-btn">
      <a href="#">Learn More</a>
    </div>
  </div>

Styling With CSS

The code starts by setting up some basic styles for the body of the document: margin, background color, font family, etc. and The text is centered on the page.

Then comes the hero section which sets up some more specific styles for that particular section of content: position relative to its parent element. Next comes an image with a height 70% so that it doesn't take up too much space in relation to its parent element (the hero).

The code will create a 400px wide and 70% high hero image.The .image class will cause the height of the image to be 70% of its width, while the .text class will cause the text to be centered in the hero image.

After that the code starts with a div that has a background image of linear-gradientand the border radius is 30px or It also has an absolute position.

The next div is the second one in the code. The code is a good example of how to create an image with a gradient. and last is a button that has an animation. The button is animated when it's clicked and the animation lasts for 2 seconds.

Here are the CSS code ends, its complete styling is given in the below code example, You must go and see it once, you will understand all the codes.

* {

text-align: center;

}

body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  background-color: #eee;
  min-height: 100vh;
}

.hero {
  display: inline-block;
  position: relative;
  width: 400px;
  min-width: 400px;
  height: 400px;
  border-radius: 30px;
  overflow:hidden;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3);
  margin: 30px;
}

.image {
  height: 70%;
}

.text {
  background-image: linear-gradient(0deg , #3f5efb, #fc466b);
  border-radius: 30px;
  position: absolute;
  top: 55%;
  left: -5px;
  height: 65%;
  width: 108%;
  transform: skew(19deg, -9deg);
}

.second .text {
  background-image: linear-gradient(-20deg , #bb7413, #e7d25c)
}

.logo {
  height: 80px;
  width: 80px;
  border-radius: 20px;
  background-color: #fff;
  position: absolute;
  bottom: 30%;
  left: 30px;
  overflow:hidden;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.7);
}

.logo img {
  height: 100%;
}

.main-text {
  position: absolute;
  color: #fff;
  font-weight: 900;
  left: 150px;
  bottom: 26%;
}

.hero-btn {
  position: absolute;
  color: #fff;
  right: 30px;
  bottom: 10%;
  padding: 10px 20px;
  border: 1px solid #fff;
  animation: button-anim 2s ease 0s infinite normal forwards;
}

@keyframes button-anim {
  0% {
    transform: translate(0);
  }

  20% {
    transform: translate(-2px, 2px);
  }

  40% {
    transform: translate(-2px, -2px);
  }

  60% {
    transform: translate(2px, 2px);
  }

  80% {
    transform: translate(2px, -2px);
  }

  100% {
    transform: translate(0);
  }
}

.hero-btn:hover{
  animation: none;
}

.hero-btn a {
  color: #fff;
}

.date {
  position: absolute;
  color: #fff;
  left: 30px;
  bottom: 10%;
}

.btn i:before {
  width: 14px;
  height: 14px;
  position: fixed;
  color: #fff;
  background: #0077B5;
  padding: 10px;
  border-radius: 50%;
  top:5px;
  right:5px;
}

Thank you for spending your valuable time in reading this article. We hope you liked the project.