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

Add google font in website | how to insert custom font in website - scoobcode

As per the requirement sometimes web developers have to use an external custom font style. And this requirement can be fulfilled by Google font. There have many websites to fulfill the requirement. But the reason behind why I choose this place because google font most user-friendly, fast, and reliable. Here in this blog, I will share some steps to add google font to your website code. Also, I had already uploaded the full video tutorial on our YouTube channel. You can also check out our video. Full video tutorial:  https://youtu.be/qNT-pli5qTM Note: Copy the code and make your own design. Also, go to our YouTube channel for more useful content. Steps Step 1: Search Google font in any browser or go to this link  font.google.com Step 2: After opening the website choose any font face Step 3: Select any font style Step 4: Two way of getting code Step 5: Copy the link and paste your HTML code (Method 1) Step 6: Paste the code in your HTML file Step 7: Add the CSS code Step 8: Check the outp
Post a Comment
Read more