Make a perfect CSS HTML card for your website! [Free Source code]

In this tutorial, we’ll create a minimal and stylish card component that will enhance user interaction. We’ll cover the HTML structure, CSS styling, and animations to make the card engaging. Let’s dive in!

Step 1 HTML :

We will use semantic HTML elements to build our card. The h2 tag will represent the title, the p tag for the description, the a tag for the link, and the div tag to display the image.

<div class="item-holder">
  <div class="item">
    <div class="image"></div>
    <div class="text">
      <h2>UX-UI design with Pirabu</h2>
      <p>UX/UI Designer & front-end developer based in Paris.</p>
    </div>
    <a href="https://pirabucontent.valaakam.com/" target="_blank" >Visit</a>
  </div>
</div>

Step 2 CSS (style) :

Now, we’ll style the card to give it a clean and modern appearance. We’ll apply shadows, transitions, and proper alignment.

.item-holder{
  text-align:center;
}
.item {
   height: 350px;
   width: 300px;
   background: white;
   margin: 4rem auto;
   border-radius:10px;
   overflow:hidden;
   box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.1);
   transition: all 0.5s;
}
.item .image{
  height:150px;
  width:100%;
  background-image:url(https://pirabucontent.valaakam.com/wp-content/uploads/2022/10/fixed-button-html-Pirabu-1.jpg);
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  transition: all 0.5s;
}
.item .text{
  padding: 0rem 1rem;
}
.item a{
  font-size:0.8rem;
  text-decoration:none;
  text-transform:uppercase;
  border:1px solid #000;
  color:#000;
  background-color:rgba(0,0,0,0);
  padding:0.25rem 0.5rem;
  border-radius:15px;
  transition: all 0.5s;
}

Step 3 CSS Animation (style) :

To enhance the user experience, we’ll add a hover effect. When the user hovers over the card, the card lifts, and the image transitions smoothly.

/* Hover effect */
.item:hover{
  transform:translateY(-15px);
}
.item:hover .image{
  background-position:center bottom;
}
.item:hover a{
  color:#fff;
  background-color:rgba(0,0,0,1);
  padding:0.25rem 1rem;
}