Profile Card

In this example below you will see how to do a Profile Card with some HTML / CSS and Javascript

Messing around with hover states and transitions.

Thumbnail
This awesome code was written by slavanossar, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright slavanossar ©
  • HTML
  • CSS
  • JavaScript
    <div class="container">
	<div class="outer">
		<div class="glass"></div>
		<div class="img"></div>
		<div class="inner">
			<span>YO</span>
		</div>
	</div>
</div>

/*Downloaded from https://www.codeseek.co/slavanossar/profile-card-bZkvYx */
    @import "bourbon";
@import "neat";

$t-hover: 300ms;
$f-hover: cubic-bezier(0.24, 0.96, 0.56, 0.99);
$t-show: 400ms;
$f-show: cubic-bezier(0.24, 0.96, 0.56, 0.99);
$f-elastic: cubic-bezier(0.48, 1.07, 0.74, 1.15);

html,
body {
	height: 100%;
}

.container {
	width: 100%;
	height: 100%;
	padding-top: 100px;
	background-color: #f98787;
	
	text-align: center;
	
	.outer {
		position: relative;
		top: 0;

		display: inline-block;
		width: 300px;
		height: 400px;
		padding: 30px;
		border-radius: 5px;
		overflow: hidden;
		
		background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(245,245,245,1) 100%);
		
		background-color: #ffffff;
		
		box-shadow: 0 0 2px rgba(230,105,105,0), 0 0 2px rgba(230,105,105,0), 0 4px 12px rgba(230,105,105,0);
		
		cursor: pointer;
		
		transform: scale(1);
		
		transition: box-shadow $t-hover $f-hover, top $t-hover $f-hover, transform $t-show $f-show;
		
		&:hover {
			top: -4px;
			
			box-shadow: 2px 2px 2px rgba(230,105,105,0.8), -2px 2px 2px rgba(230,105,105,0.8), 0 4px 12px rgba(230,105,105,0.8);
			
			.glass {
				opacity: 0.8;
			}
			
			.inner {
				transform: translate(-50%,90%);
			}
		}
		
		&.-show {
			top: -10px;
			
			box-shadow: 2px 2px 2px rgba(230,105,105,0), -2px 2px 2px rgba(230,105,105,0), 0 8px 20px rgba(230,105,105,1);
			
			transform: scale(1.1);
			
			.glass {
				padding-bottom: 80%;
				
				opacity: 0.1;
			}
			
			.img {
				padding-bottom: 100%;
				
				box-shadow: inset 0 0 5px rgba(0,0,0,0);
			}
			
			.inner {
				width: 80%;

				transform: translate(-50%,0) !important;
				span {
					top: 25px;
				}
			}
		}
		
		.glass {
			position: absolute;
			top: 30px;
			left: 30px;
			
			display: inline-block;
			width: 80%;
			padding-bottom: 100%;
			border-radius: 5px;
			
			background: linear-gradient(45deg, rgba(224,250,254,0.5) 0%,rgba(210,237,250,0.5) 9%,rgba(184,213,242,0.5) 24%,rgba(202,224,248,0.5) 26%,rgba(201,222,245,0.5) 44%,rgba(202,222,242,0.5) 62%,rgba(214,234,250,0.5) 78%,rgba(221,240,253,0.5) 100%);
			
			opacity: 1;
			
			transition: opacity $t-show $f-show, padding-bottom $t-show $f-show;
		}
		
		.img {
			display: inline-block;
			width: 100%;
			padding-bottom: 125%;
			border-radius: 5px;
			
			background: url('http://unsplash.it/300/300');
			background-size: cover;
			background-repeat: no-repeat; 
			background-position: 50% 50%;
			
			box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
			
			transition: padding-bottom $t-show $f-show;
		}
		
		.inner {
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translate(-50%, 100%);
			
			
			display: inline-block;
			width: 70%;
			height: 25%;
			padding: 30px;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			margin: 0 auto;
			
			background-color: #ffc8c8;
			background: linear-gradient(45deg, rgba(252,184,192,0.2) 0%,rgba(243,169,174,0.2) 10%,rgba(228,144,145,0.2) 35%,rgba(234,144,144,0.2) 50%,rgba(240,144,144,0.2) 74%,rgba(229,107,109,0.2) 76%,rgba(245,163,178,0.2) 91%,rgba(253,189,212,0.2) 100%);
			
			box-shadow: inset 0 0 4px rgba(230,105,105,0.5);
			
			transition: transform $t-show $f-show, width $t-show $f-show;

			span {
				position: absolute;
				top: 100%;
				left: 0;
				
				display: block;
				width: 100%;
				
				font-size: 30px;
				text-shadow: 1px 1px 2px rgba(177,101,101,0.2);
				color: #f98787;
				
				transition: top $t-show $f-elastic;
			}
		}
	}
}


/*Downloaded from https://www.codeseek.co/slavanossar/profile-card-bZkvYx */
    $(document).on('ready', function () {
	$('.outer').on('click', function (e) {
		e.preventDefault;
		$(this).toggleClass('-show');
	});
});

Comments