In this tutorial we will see how to make a Profile Card With Hover Effect using HTML and CSS. Pure CSS is used for this purpose, Both HTML and CSS code is given, feel free to use it in your projects.
Table of Contents
HTML Code
HTML Code is given below, The profile card has a main div with class profile, this main div has two more divs with class content and picture.
<div class="profile">
<div class="content">
<h3>Lionel Messi</h3>
<p>Lionel Andrés Messi, also known as Leo Messi, is an Argentine professional footballer who plays as a forward for Ligue 1 club Paris Saint-Germain.</p>
<div class="border"></div>
</div>
<div class="picture">
<img src="dp.png">
</div>
</div>
CSS Code
CSS Code is given below, transform:translateY() is used to animate profile card on mouse hover. Other CSS properties used are transition, display, line-height, align-items, justify-content, position, box-sizing and background-color property.
body
{
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
background-color: #ddd;
}
.profile
{
position: relative;
cursor: pointer;
margin: 0 20px;
}
.content
{
background-color: #eee;
height: 200px;
width: 200px;
box-shadow: 0 5px 5px #999;
padding: 5px;
box-sizing: border-box;
transition: 1s;
}
.content h3
{
font-size: 20px;
text-align: center;
}
.content p
{
font-size: 13px;
text-align: center;
line-height: 1.5;
}
.border
{
height: 3px;
width: 50px;
background-color: #2091BA;
margin: 20px auto 0 auto;
}
.picture
{
background-color: #32ACD9;
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
justify-content: center;
align-items: center;
display: flex;
transition: 1s;
box-shadow: 0 5px 5px #999;
}
.picture img
{
width: 100px;
border-radius: 50%;
border: 2px solid #999;
}
.profile:hover .picture
{
transform: translateY(-100px);
}
.profile:hover .content
{
transform: translateY(100px);
}
Demo
Video Tutorial
Watch our video tutorial on how to make a Profile Card With Hover Effect using HTML and CSS.