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

The card will be minimal, stylish and it will increase engagement with the user.

Step 1 HTML :

We are going to use the h2 tag for the title, the p tag for the paragraph, the a tag for the link, and the div tag for 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 CSS style part.

.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) :

Now, the animation part gives a more dynamic look.

/* 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;
}