Amazing User Profile Design With Hover Effect Using CSS 2022 | UI Design | CodeWithNizami.

Dear friends in this article we will tell you How to Amazing User Profile Design With Hover Effect Using CSS 2022. So i hope you like our article because here you can get the source code free and this code you can use in your projects. Guys if you learn more interesting articles then go to search bar and type article name then you can find easily more interested articles.

1. How to make portfolio website header with dark and light mode using html css and javascript?

2. How to make claymorphism login form using css?

3. How to make tea cup with vapour effects using css?

4. How to create traffic lights using javascript?

5. How to design neumorphism clock using html css and javascript?

Here you can make easily this user profile design just follow some steps. And i hope you understand what is html css.If you not know what is this so please first learn basic html and css then you can make this.

HTML For User Profile

First of all open your code editor like vs code sublime notepad ++ etc. After this create html file then click the shilf+1 and enter you can get the html snipt from vs code. After that give the div with class and class name is card then give one more div tag for image in this class give the image tag and you can use the dp in this image tag.

HTML Code.

<div class="card">
    <div class="img">
        <img src="./card-hover-img.jpg" alt="jpg">
    </div>
    <h2>Julie Andrson</h2>
    <div class="all-content">
        <div class="content">
            <p>julieandrson@gmail.com</p>
            <h5>Developer | Designer</h5>
        </div>
        <div class="social-icons">
            <div class="icon fb"><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></div>
            <div class="icon twtr"><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></div>
            <div class="icon insta"><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></div>
            <div class="icon yt"><a href="#"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></div>
        </div>
        <div class="footer">
            <p>120k Followers | 10k Following</p>
        </div>
    </div>
   </div>

CSS For Design User Profile

Now we have to write the code of css and we will write the code of css in the same file of html so that we don’t have to create a separate file if you also want to write the code of css in the same file of html then inside the head section you have to take style tag You can write the code of css and if you want to write the code of css separately by creating a new file, then you have to create a new file and import that file in the link tag inside the head section in the html file. So that we can use the css file for this user profile design.

CSS Code.

.card{
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
        }
        .img{
            width: 200px;
            margin: auto;
        }
        .img img{
            width: 100%;
            border: 7px solid rgb(202,202,202);
            border-radius: 15px;
            transition: all 0.4s;
        }
        h2{
            text-align: center;
            font-size: 30px;
            font-family: 'Paytone One', sans-serif;
            margin-top: 20px;
            transition: all 0.4s;
        }
        .content p{
            text-align: center;
            letter-spacing: 2px;
        }
        .content h5{
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
            letter-spacing: 3px;
        }
        .social-icons{
            display: flex;
        }
        .social-icons .icon{
            margin: auto;
        }
        .social-icons .icon a{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            background-color: rgb(0,120,233);
            border-radius: 50%;
            margin: 10px;
            font-size: 18px;
            border: 3px solid rgb(0,120,233);
            color: #fff;
            text-decoration: none;
            transition: all 0.4s;
        }
        .social-icons .fb a:hover{
            background-color: rgb(0,60,88);
            border: 3px solid rgb(153,153,153);
        }
        .social-icons .twtr a{
            background-color: rgb(0,185,209);
            border: 3px solid rgb(0,185,209);
        }
        .social-icons .twtr a:hover{
            background-color: rgb(0,120,136);
            border: 3px solid rgb(153,153,153);
        }
        .social-icons .insta a{
            background-color: rgb(209,0,63);
            border: 3px solid rgb(209,0,63);
        }
        .social-icons .insta a:hover{
            background-color: rgb(124,1,38);
            border: 3px solid rgb(153,153,153);
        }
        .social-icons .yt a{
            background-color: rgb(209,0,0);
            border: 3px solid rgb(209,0,0);
        }
        .social-icons .yt a:hover{
            background-color: rgb(117,1,1);
            border: 3px solid rgb(153,153,153);
        }
        .footer p{
            text-align: center;
            letter-spacing: 1px;
        }
        .all-content{
            height: 10px;
            padding-top: 20px;
            background-color: rgba(255,0,0,0);
            transform: translateY(10px);
            transition: all 0.4s;
            overflow: hidden;
        }
        .card:hover .all-content{
            height: auto;
            transform: translateY(-10px);
        }
        .card:hover .img img{
            transform: translateY(-60px);
            box-shadow: 0 0 10px rgb(0 0 0 /45%),
            0 0 30px rgb(0 0 0 / 54%);
        }
        .card:hover h2{
            transform: translateY(-30px);
        }

Watch Video Related this Article