Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a profile card with a cool hover effect. This profile card comes with a sleek and modern UI. To create this effect we need HTML and CSS.
I have a bunch of other tutorials on CSS effects and animations. You can check them out here.
Video Tutorial:
If you would like to code along with me you can check out the video version of this tutorial here down below. I post a new tutorial on my youtube channel every alternate day. So be sure to subscribe so you don’t miss any of the tutorials.
Project Folder Structure:
Let us take a quick look at the project folder structure. The project folder consists of two files – index.html and style.css. The first one is the HTML document and the second is the stylesheet. We also have a third file which is an image.
HTML:
We start with the HTML code. First, copy the code provided below and paste it into your HTML document.
The HTML code consists of a div with a class name card. Inside the card, we have an img, an h5 tag and an h3 tag.
The src attribute of our IMG tag is the path to the profile image we would like to use in our project. Next, the h3 consists of the user’s name while h5 consists of the user’s job designation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Profile Card</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="card">
<img src="profile-img.jpg" />
<h5>Market Research Analyst</h5>
<h3>Stephen Brown</h3>
</div>
</body>
</html>
CSS:
Now we style the document and add the effects using CSS. Copy the code below and paste it into your stylesheet.
We start by removing unwanted paddings and margins from all the elements. Next, we set the background color to ‘#5ca3ff’.
In the next step, we set the dimensions for the card and centre it using transforms. We also set the overflow of the card to hidden. Now we set the size of img to 100% and transition to 0.5s.
We set the width of h3 to 60% and that of h5 to 80%. We then set the skew of both these elements to -5deg. You can further style them as per your liking. We next position h3 by setting the right to -65% and h5 by right -85%.
When the card has hovered we set the right property of h3 and h5 to -2% so that it looks like it slides from right to left on hover.
Similarly, we add an effect to the image. We scale the img and a contrast filter when the card has hovered.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #5ca3ff;
}
.card {
width: 350px;
height: 500px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
box-shadow: 0 35px 65px rgba(6, 34, 70, 0.6);
overflow: hidden;
}
.card img {
width: 100%;
transition: 0.5s;
}
h3 {
background-color: #5ca3ff;
width: 60%;
position: absolute;
bottom: 80px;
right: -65%;
padding: 10px 0;
color: #ffffff;
text-align: center;
letter-spacing: 1px;
font-size: 20px;
font-weight: 600;
transform: skew(-5deg);
transition: 0.3s;
}
h5 {
background-color: #ffffff;
width: 80%;
padding: 12px 0;
text-align: center;
font-size: 16px;
letter-spacing: 0.5px;
position: absolute;
right: -85%;
bottom: 37px;
transform: skew(-5deg);
transition: 0.3s;
}
.card:hover h3,
.card:hover h5 {
right: -2%;
}
.card:hover img {
transform: scale(1.15);
filter: contrast(120%);
}
The profile card with hover effect is now ready. If you have any issues while creating this code you can download the source code by clicking on the download code button below. Also, don’t forget to leave your suggestions and feedback in the comments below.
