How to make Profile Card Hover Effect using CSS ?

Last Updated : 22 Jul, 2024

Almost all of us must have heard that 'the first impression is the last impression'. The profile card carries the most important details we should know about a person at the very first instant. A better impression attracts more traffic. So to engage more audience in a website it is very important to concentrate on designing every small part of it. Profile cards being one of them.

In this article, we will learn how to create a Profile Card Hover Effect using CSS.

Approach:

At first, we create the basic HTML template (index.html) to insert the image and profile.
We have an HTML div with a "card" class. Inside the div, we have an image with class "img-box" and the profile name and designation of the account holder with class "info".
This profile card image is used.
We include the "style.css" in "index.html" file that contains all the CSS styles.
We need to import the following google font URL in our CSS file for font-family: 'Merriweather', serif;

@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap");

Example: The image will move up and the profile name with designation will show up. There is also a button to contact the user.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Profile Card</title>
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="card">
        <div class="img-box">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200719193804/Why-GeeksforGeeks-is-an-Essential-Platform-for-CS-IT-Students.png"
                alt="profile pic">
        </div>
        <div class="info">
            <h2>Profile Card</h2>
            <p>Web Designer | Influencer</p>

            <button>Contact Me</button>
        </div>
    </div>
</body>
</html>

CSS code: The following CSS code (style.css) will bring the hover effect to this profile card. The following code is used in the above HTML file

CSS

/* Filename:style.css */
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@700&amp;display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    background: rgb(11, 80, 136);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Merriweather', serif;
}

/* Profile card making starts here */
.card {
    width: 320px;
    height: 400px;
    background-color: white;
    border-radius: 8px;
    position: relative;
}

/* Contains the image */
.img-box {
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 10px;
    left: 10px;
    background-color: white;
    transition: 0.5s;
    z-index: 2;

}

/* The image dimensions changes on hover and the
   underlaying information shows up*/
.card:hover .img-box {
    top: 10px;
    bottom: 125px;
    right: 10px;
    left: 10px;
}

/* Image radius changes on hover*/
.card:hover img {
    border-radius: 10px;
}

/* The image */
img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
}

/* Contains the name, designation and a button to contact */
.info {
    position: absolute;
    bottom: 40px;
    right: 10px;
    left: 10px;
    text-align: center;
    height: 80px;
}

/* Style the name*/
h2 {
    font-weight: bold;
    color: rgb(51, 50, 50);
}

/* Style the paragraph which contains the designation */
p {
    color: rgb(197, 74, 111);
}

/* The button to contact */
button {
    position: absolute;
    background-color: rgb(11, 80, 136);
    border: none;
    border-radius: 10px;
    text-align: center;
    left: 75px;
    margin: 8px;
    font-size: 20px;
    padding: 10px 15px;
    color: wheat;
    font-family: 'Merriweather', serif;
    cursor: pointer;
}

Output: Now, as you can see in the output, we have created a beautiful profile card hover effect, which will attract more readers to read the contents of particular writers/influencers more on the dedicated webpage.