Hello everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create responsive profile cards. This profile effect comes with a stunning hover effect including an image overlay. To build these beautiful cards, we need HTML and CSS.
I have a playlist of tutorials on cards and card hover effects. You can check it out here. Now let us begin the tutorial.
Video Tutorial:
If you like to learn by coding along to the video tutorial, check out the video version of this tutorial down below. Also, subscribe to my youtube channel so you don’t miss any web development tips, tricks and tutorials.
Project Folder Structure:
We start by taking a glance at the project folder structure. Firstly create a project folder as Responsive Profile Cards. Inside this folder, we have index.html and style.css. The first is an HTML document and, the second is the stylesheet. Apart from this we even have three images of the aspect ratio 3:4. You can download them along with the source.
HTML:
We start with the HTML section. Firstly copy the code provided below and paste it into your HTML document. Next, we add font awesome CDN link in the head section of our HTML document.
The HTML section consists of a div with a class name wrapper. Inside the wrapper, we have three divs with the class name container. Each of these containers encloses an img-wrapper div and a details div.
The img-wrapper consists of the profile image and, the details include name, job position and social links.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Profile Cards</title>
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="img-wrapper"><img src="profile-img-1.png" /></div>
<div class="details">
<h3>Rose Warner</h3>
<h5>Web Developer</h5>
<div class="social-icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
<div class="container">
<div class="img-wrapper"><img src="profile-img-2.png" /></div>
<div class="details">
<h3>Mark Smith</h3>
<h5>UI Designer</h5>
<div class="social-icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
<div class="container">
<div class="img-wrapper"><img src="profile-img-3.png" /></div>
<div class="details">
<h3>Emily Mitchell</h3>
<h5>Project Manager</h5>
<div class="social-icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</div>
</body>
</html>
Â
CSS:
Now to add style to this layout, we use CSS. Do copy the code below and paste it into your stylesheet. We start by setting fixed dimensions for the container. These dimensions are in the aspect ratio of 3:4 which, is the same as our profile images.
We set the background of the container as a linear gradient. We use the background-positon and background-size property to create the fill effect on hover.
In order to add overlay to the image we use the ‘after’ pseudo-element. Next, we style the details div and set it 100px below the card. Now we set the overflow of the container div to hidden. This hides the details div.
On hover, the details div is moved upwards so as to make it visible. We use a transition of 0.7s to make the effect look smooth. Finally, we add media queries to make the profile cards responsive.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #000000;
}
.wrapper {
padding: 30px 0;
min-height: 100vh;
display: grid;
place-items: center;
gap: 20px;
}
.container {
height: 333px;
width: 250px;
padding: 12px;
position: relative;
background: linear-gradient(#529fe9 50%, #1e202b 50%) 0 100% no-repeat;
background-size: 100% 200%;
transition: 0.7s;
overflow: hidden;
}
.img-wrapper {
height: 100%;
width: 100%;
position: relative;
}
.container img {
width: 100%;
height: 100%;
}
.container:hover {
background-position: 0 0;
}
.details {
position: absolute;
background-color: #ffffff;
color: #000000;
width: 80%;
text-align: center;
padding: 10px 0;
bottom: -100px;
margin: auto;
left: 0;
right: 0;
transition: 0.7s;
}
h3,
h5 {
font-family: "Poppins", sans-serif;
font-weight: 500;
}
h3 {
letter-spacing: 1px;
font-size: 14px;
}
h5 {
font-size: 12px;
}
.social-icons {
width: 100%;
display: flex;
justify-content: space-around;
margin: 10px 0 5px 0;
}
.container:hover .details {
bottom: 30px;
}
.img-wrapper:after {
position: absolute;
content: "";
height: 100%;
width: 100%;
background-color: #000000;
top: 0;
left: 0;
opacity: 0;
transition: 0.7s;
}
.container:hover .img-wrapper:after {
opacity: 0.5;
}
i:hover {
color: #529fe9;
cursor: pointer;
}
@media screen and (min-width: 992px) {
.wrapper {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.container {
height: 400px;
width: 300px;
padding: 15px;
}
}
Â
That’s it for this tutorial. I hope you enjoyed the tutorial. If you have any queries, ideas or feedback drop them in the comments below. Also, if you face any issues while creating this project, you can download the source code by clicking on the download button.
Happy Coding!
