Creating an Engaging Profile Card Reveal on Hover with HTML and CSS

Rayen

Bring life to your website by incorporating interactive profile cards that reveal additional information when hovered over. In this tutorial, we'll guide you through the process of designing and implementing a profile card reveal effect using HTML and CSS. Elevate your user experience and make your website more dynamic with this engaging feature.




Step 1: HTML Markup:

Begin by setting up the HTML structure for your profile card. Create a container for the card, including the front and back elements.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card Hover Effect</title>

    <!-- icons link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- css style  -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="card">

        <div class="profile-pic">
            <img src="img/img (3).png" alt="https://wall.alphacoders.com/big.php?i=1334174">
        </div>

        <div class="details">
            <div class="content">
                <h2>RAYEN</h2>
                <p class="tag">WEB DESIGNER</p>
                <p class="about">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis minima provident esse hic </p>
            </div>

            <div class="buttons">
                <div class="social">
                    <i class="fa-brands fa-instagram"></i>
                    <i class="fa-brands fa-twitter"></i>
                    <i class="fa-brands fa-github"></i>
                </div>
                <a href="#" class="link">project <i class="fa-solid fa-up-right-from-square"></i></a>
            </div>

        </div>

    </div>
</body>

</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) 
/*-------------------- CSS --------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    background: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
:root{
    --prime-color: #588a87;
    --hover-color: #b6c6be;
}

.card {
    width: 280px;
    height: 280px;
    background: white;
    border-radius: 30px;
    position: relative;
    transition: 0.5s ease-in-out;
    overflow: hidden;
}

.profile-pic {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 30px;
    z-index: 1;
    border: 5px solid white;
    overflow: hidden;
    transition: 0.5s ease-in-out 0.3s;
}
.profile-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    top: 0;
    transition: 0.5s ease-in-out;
}

.card:hover .profile-pic{
    width: 100px;
    height: 100px;
    top: 10px;
    left: 10px;
    border-radius: 50%;
    border: 5px solid var(--prime-color);
    box-shadow: 0 0 10px #1115;
    transition: 0.5s ease-in-out;
    z-index: 3;
}
.card:hover .profile-pic img {
    transform: scale(1.6);
    top: 20px;
    transition: 0.5s ease-in-out 0.5s;

}

.details {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;

    z-index: 2;
    top: 80%;

    background: var(--prime-color);
    color: white;
    border-radius: 25px;
    box-shadow: inset 5px 5px 10px #1114;
    transition: 0.3s ease-in-out 0.2s;
    overflow: hidden;
}

.card:hover .details {
    top: 20%;
    border-radius: 80px 25px 25px 25px;
    transition:  0.5s ease-in-out 0.2s;
}

.content{
    position: absolute;
    top: -300px;
    left: 20px;
    opacity: 0;
    transition: 0.5s ease-in-out 0s;
}
.card:hover .content {
    top: 10px;
    opacity: 1;
    transition: 0.5s ease-in-out 0.5s,
    opacity 0.5s ease-in-out 1s
    ;
}

.content h2{
    margin-left: 100px;
    font-size: 1.5rem;
    font-weight: bold;
}
.content .tag {
    margin-left: 100px;
    font-size: 0.6rem;
    letter-spacing: 2px;
    font-weight: 200;
}

.content .about {
    font-size: 0.8rem;
    margin-top: 40px;
    width: 80%;
}

.buttons{
    position: absolute;
    bottom: 12px;
    width: 100%;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.buttons .social {
    display: flex;
    gap: 15px;
}
.buttons .social  i {
    color: white;
    cursor: pointer;
}
.buttons .social  i:hover {
    color: var(--hover-color);
}

.buttons .link{
    text-decoration: none;
    color: var(--prime-color);
    background: white;
    padding: 7px 10px;
    border-radius: 20px;
    font-size: .9rem;
}
.buttons .link:hover{
    background: var(--hover-color);
    
}

Personalize your profile card by adding your profile image, basic information, and additional details on the back. Adjust colors, fonts, and sizes to match your website's theme.

Embed the profile card in relevant sections of your website, such as team pages or about sections. The hover effect adds an interactive touch, inviting users to explore more about each profile.

0 Comments