Profile card hover effect using HTML and CSS

CSS Card Hover Effect.
This tutorial blog to learn how to create Profile Card Hover Effect Using HTML And CSS. There we use CSS for card hover animation. When you hover on this card then profile image slide up with rounded shape and slide up to show content.

Video tutorial of Profile Card Hover Effect Using HTML And CSS

This tutorial video can help you to CSS Card Hover Effect | Profile Card Hover Effect Using HTML And CSS

CSS Card Hover Effect | Profile Card Hover Effect Using HTML And CSS [Source Codes]

This source code can help you to create Profile Card Hover Effect Using HTML and CSS

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="container">
	<div class="column">
		<div class="card">
			<div class="pro-pic" style="background-image:url(images/pro-pic.png);"></div>
			<div class="desciption-wrap">
				<div class="description">
					<h3>Marina Smith</h3>
					<h4>FrontEnd Developer</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
					<ul>
						<li><a href="#"><img src="images/facebook.png"></a></li>
						<li><a href="#"><img src="images/instagram.png"></a></li>
						<li><a href="#"><img src="images/linkedin.png"></a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="column">
		<div class="card">
			<div class="pro-pic" style="background-image:url(images/pro-pic.png);"></div>
			<div class="desciption-wrap">
				<div class="description">
					<h3>Marina Smith</h3>
					<h4>FrontEnd Developer</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
					<ul>
						<li><a href="#"><img src="images/facebook.png"></a></li>
						<li><a href="#"><img src="images/instagram.png"></a></li>
						<li><a href="#"><img src="images/linkedin.png"></a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>

</div>

</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: linear-gradient(to bottom right,#394aff , #34fa94);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.container{
	width: 100%;
	max-width: 1200px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.column{
	flex: 0 0 40%;
}

.card{
	border:1px solid;
	min-height: 100%;
	position: relative;
	background:#000;
	transition: all 0.3s ease-out;
}
.card .desciption-wrap{
	padding:105px 30px;
	position: relative;
	overflow:hidden;
}
.card .description{
	color: #fff;
	text-align: center;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	font-size: 20px;
	line-height: 1.4;
	transition: all 0.5s ease-out;
	overflow-x: auto;
	transform:translateY(100%);
	opacity: 0;
}
.card .description > *{
	width: 100%;
}
.card .description h3{
	margin: 0;
	font-size: 26px;
}
.card .description h4{
	margin: 0;
}
.card .description ul{
	padding: 0;
	margin: 0;
	list-style: none;
}
.card .description ul li{
	display: inline-block;
	width: 40px;
	margin: 0 10px;
	transition: all 0.3s ease-out;
	transform: perspective(1000px)
	rotateX(0deg);
}
.card .description ul li:hover{
	transform: perspective(1000px)
	rotateX(30deg);
	transform-style: preserve-3d;
}
.card .description ul li img{
	max-width: 100%;
}

.pro-pic{
	position: absolute;
	left: 50%;
	top: 0;
	width: 100%;
	height: 100%;
	transform: translateX(-50%);
	background-size: cover;
	background-position: center center;
	transition: all 0.5s ease-out;
}
.card:hover .pro-pic{
	transform:translate(-50%,-50%);
	width: 150px;
	height: 150px;
	border-radius: 50%
}
.card:hover{
	border-radius: 50px;
}
.card:hover .description{
	transform:translateY(0%);
	opacity: 1;
}