UX-UI design with Pirabu
UX/UI Designer & front-end developer based in Paris.
Pirabu
AI Clone
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.
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;
}
View action in codepen
Whatsapp link / SMS with body etc