Skip to main content

Make profile card design with hover effect using HTML and CSS - scoobcode

This blog will show you how to make a profile card design with a hover effect using HTML and CSS. Profile card is used for a short introduction for a specific person.

Full video tutorial: https://youtu.be/9XXMJAuquCI

Note: Copy the code and make your own design. Also, go to our YouTube channel for more useful content.

Source code

👉 HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Info-card</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div class="main">
        <div class="card">
            <div class="img-box">
                <img src="img/p1.jpg" alt="">
            </div>
            <div class="detail">
                <div class="content">
                    <h2>Alex</h2>
                    <span>Front-web developer</span>
                    <div class="social-link">
                        <a href="#" class="link"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                        <a href="#" class="link"><i class="fa fa-github" aria-hidden="true"></i></a>
                        <a href="#" class="link"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="img-box">
                <img src="img/p2.jpg" alt="">
            </div>
            <div class="detail">
                <div class="content">
                    <h2>Jeni</h2>
                    <span>Android developer</span>
                    <div class="social-link">
                        <a href="#" class="link"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                        <a href="#" class="link"><i class="fa fa-github" aria-hidden="true"></i></a>
                        <a href="#" class="link"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="img-box">
                <img src="img/p3.jpg" alt="">
            </div>
            <div class="detail">
                <div class="content">
                    <h2>Roman</h2>
                    <span>UI/UX designer</span>
                    <div class="social-link">
                        <a href="#" class="link"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                        <a href="#" class="link"><i class="fa fa-github" aria-hidden="true"></i></a>
                        <a href="#" class="link"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="img-box">
                <img src="img/p4.jpg" alt="">
            </div>
            <div class="detail">
                <div class="content">
                    <h2>Max</h2>
                    <span>Back-end developer</span>
                    <div class="social-link">
                        <a href="#" class="link"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                        <a href="#" class="link"><i class="fa fa-github" aria-hidden="true"></i></a>
                        <a href="#" class="link"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

👉 CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.main{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.card{
    position: relative;
    width: 300px;
    height: 400px;
    background: linear-gradient(red 30%, black 30%);
    border-radius: 20px;
    overflow: hidden;
    margin: 10px;
}
.img-box{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
    z-index: 10000;
    transform-origin: top;
}
img{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.card:hover .img-box{
    transform: translateY(30px) scale(0.5);
}
.detail{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 30px;
    color:white;
}
.content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.content h2{
    font-size: 30px;
    font-weight: 400;
}
.content span{
    font-size: 15px;
    font-weight: 400;
    color:red;
}
.social-link{
    position: relative;
    display: flex;
}
.social-link a{
    text-decoration: none;
    margin: 8px;
    font-size: 25px;
    color: white;
    background: rgba(255, 255, 255, 0.109);
    padding: 15px;
    border-radius: 20px;
}
.social-link a:hover i{
    color:red;
}

You can support me to like this blog and share it with your programmer friends. Go to my youtube channel scoobcode and watch the full tutorial video.

Comments

Post a Comment

Popular posts from this blog

Automate Google chrome dino game for unlimited score using JavaScript - scoobcode

Dino game is one of the most popular games developed by google. It's a browser-based offline game. Whenever the score increases this game will be more difficult for players. Here in this blog, I will give a single line of code to automate this game for unlimited scores. Full video tutorial:  https://youtu.be/ti3bYMWRb1k Note: Copy the code and make your own design. Also, go to our YouTube channel for more useful content. Steps Click on the right button of the mouse and select Inspect option Then go to the Console tab Write the code or copy the code from the bellow section and paste in the  Console tab Source code 👉  JavaScript Runner.instance_.gameOver = () => {} You can support me to like this blog and share it with your programmer friends. Go to my youtube channel  scoobcode  and watch the full tutorial video.
Post a Comment
Read more

Add preloader animation on website just some step of code (HTML, CSS, JavaScript) - scoobcode

Preloader is a unique feature for a website, this gives a professional look to a website. Here in this blog, I will share my code, where you going to learn how to add a preloader animation effect in just some line of HTML, CSS, and JavaScript code. Note: Copy the code and make your own design. Also, go to our YouTube channel for more useful content. Full video tutorial:  https://youtu.be/7KNABcF-xz0 Output Preloader animation After preloader Source code 👉  HTML <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Simple landing page</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <div id="preloader"></div>     </div>     <header>
Post a Comment
Read more