Profile Card using HTML5 and CSS3

byCodingFlicks -August 27, 2021

0

Hello Visitor, In this Blog, we will create a profile card using HTML and CSS. In this profile card UI design, we have included some CSS animation, so that the card looks interactive. I have shared CSS animation, bootstrap, and javascript-based snippets in my blog before. if you want to explore more snippets, then you can check those as well.

In this snippet, I have used an image and font-awesome icons for social media links. When the user hovers over the image, some text will appear from the left side. We will also observe a shiny animation effect on hover. Social media links will be visible from the left one by one. We used the CSS transition effect so that all the animation occurs smoothly. Without further explanation, I am providing the code below for your experiment.

You May Also Like:

Profile Card Design with HTML and CSS [ Source Code ]:

For creating the snippet, you have to create two files. one in HTML file with .html extension and the other one is CSS with .css extension. link the CSS file in your HTML file. Also, add font-awesome cdn in your HTML file. Please Copy the code from the below boxes and paste them into the corresponding files and save it.

HTML:

<!DOCTYPE html>
<!--codingflicks.com-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>profile card using html and css</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="imgBox">
            <img src="https://i.postimg.cc/rs3MTc23/a1.jpg" alt="">
            <h2>rachel green</h2>
            <ul>
                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
            </ul>
        </div>
    </div>
</body>
</html>

CSS:

body {
	background: antiquewhite;
	margin: 0;
}
.wrapper {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
}
.imgBox {
	width: 300px;
	height: 400px;
	position: relative;
	overflow: hidden;
}
.imgBox img {
	height: 400px;
	width: 300px;
	filter: grayscale(100%);
	transition: 2s;
}
.imgBox:before {
	content: '';
	position: absolute;
	top: 0;
	left: 170%;
	height: 100%;
	width: 100%;
	background: rgba(255, 255, 255, 0.2);
	transform: skew(45deg);
	transition: .5s;
	z-index: 1;
}
.imgBox:hover:before {
	left: -170%;
}
.imgBox:hover img {
	filter: grayscale(0%);
	transform: scale(1.1);
}
.imgBox h2 {
	background: #262626;
	font-family: Poppins;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	margin: 0;
	padding: 10px 0;
	position: absolute;
	bottom: 0;
	width: 100%;
	transform-origin: right;
	transform: perspective(500px) rotateY(90deg);
	transition: 1s;
}
.imgBox:hover h2 {
	transform: perspective(400px) rotateX(0deg);
}
.imgBox ul {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.imgBox ul li {
	background: #333;
	height: 40px;
	width: 40px;
	text-align: center;
	line-height: 30px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	transform: perspective(1000px) rotateY(90deg);
	transition: .5s;
	transform-origin: left;
}
.imgBox:hover ul li {
	transform: perspective(800px) rotateX(0deg);
}
.imgBox:hover ul li:nth-child(1) {
	transition-delay: .2s;
}
.imgBox:hover ul li:nth-child(2) {
	transition-delay: .6s;
}
.imgBox:hover ul li:nth-child(3) {
	transition-delay: .8s;
}
.imgBox:hover ul li:nth-child(4) {
	transition-delay: 1.2s;
}
.imgBox ul li:hover i{
    color: deepskyblue;
}
.imgBox ul li a {
	color: white;
}

I hope you like this snippet. If so, then follow us on our social media profiles to stay connected with the blog. Thank you for visiting the blog.

Please do not enter any spam link in the comment box.