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

Create social media icon hover effect using HTML and CSS - scoobcode

Here in this blog, we going to learn how to create social media icon hover effect using only HTML & CSS. Make social media icons more attractive. Here I use Fontawesome for social media icons. Full video tutorial:  https://youtu.be/Ks2AHt3e_BM Fontawesome:  https://fontawesome.com 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">     <link rel="stylesheet" href="style.css">     <script src="https://kit.fontawesome.com/e326c3f2a0.js" crossorigin="anonymous"></script>     <title>Hover effect</title> </head> <body>          <div class=&quo
Post a Comment
Read more

Create animate tour website using HTML and CSS - scoobcode

Here in this blog, we will learn how to create an animated tour website in just some line of HTML and CSS code. Also, I will give you the source code copy it, and make your own design. We will see Flexbox, Animations, Transitions property, and many more. Live preview website: https://bit.ly/3yNMIwm Full tutorial video:  https://youtu.be/_E07NfghI_c Output 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>India Tourism</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <header>         <nav>             <div class="logo">                 <b>Indian
Post a Comment
Read more