<script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/khadkamhn/pen/WQaRaw?limit=all&page=6&q=social" />

<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">body{
	margin:0;
	color:#444;
	background:#444;
	font:300 16px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

.toggle{
	display:none;
}
.social-share-wrap{
	width:300px;
	overflow:hidden;
	background:#fff;
	/* margin:2% auto 0; */
	min-height:370px;
	border-radius:8px;
	position:relative;
	box-shadow:0 25px 55px 0 rgba(0,0,0,.21),0 16px 28px 0 rgba(0,0,0,.22);
}
.social-share-wrap .cover{
	width:100%;
	height:152px;
	background:#5DBCD2;
	opacity:1;
	-webkit-transform:translateY(0);
	        transform:translateY(0);
	-webkit-transition:all .6s ease-in-out .4s;
	transition:all .6s ease-in-out .4s;
}
.social-share-wrap .cover .image{
	width:100%;
	opacity:.8;
}
.social-share-wrap .content{
	padding:15px;
	position:relative;
}
.social-share-wrap .content .title,
.social-share-wrap .content .text,
.social-share-wrap .content .price{
	opacity:1;
	-webkit-transform:translateY(0);
	        transform:translateY(0);
	-webkit-transition:all .6s ease-in-out .4s;
	transition:all .6s ease-in-out .4s;
}
.social-share-wrap .content .label{
	top:-15px;
	right:15px;
	width:40px;
	height:40px;
	color:#eee;
	cursor:pointer;
	font-size:18px;
	line-height:40px;
	text-align:center;
	border-radius:50%;
	position:absolute;
	font-weight:normal;
	background:#34a3be;
	-webkit-transform:scale(1);
	        transform:scale(1);
	-webkit-transition:all .3s ease-in-out .6s;
	transition:all .3s ease-in-out .6s;
}
.social-share-wrap .content .title{
	margin-bottom:15px;
	text-transform:uppercase;
	-webkit-transition-duration:.4s;
	        transition-duration:.4s;
}
.social-share-wrap .content .text{
	display:block;
	line-height:24px;
	-webkit-transition-duration:.6s;
	        transition-duration:.6s;
}
.social-share-wrap .content .price{
	font-size:36px;
	font-weight:500;
	line-height:36px;
	margin:30px 0 15px;
	-webkit-transition-duration:.8s;
	        transition-duration:.8s;
}
.social-share-wrap .content .buy{
	right:15px;
	bottom:30px;
	padding:8px;
	color:inherit;
	font-weight:400;
	font-size:18px;
	position:absolute;
	text-decoration:none;
	text-transform:uppercase;
	-webkit-transition:all .2s ease-in-out 0s;
	transition:all .2s ease-in-out 0s;
}
.social-share-wrap .content .buy:hover{
	background:#ddd;
}

.social-share-wrap .social-share-overlay{
	top:0;
	left:0;
	right:0;
	bottom:0;
	padding:15px;
	position:absolute;
	-webkit-transform:scale(0);
	        transform:scale(0);
	-webkit-transition:all .3s ease-in-out 0s;
	transition:all .3s ease-in-out 0s;
}
.social-share-wrap .social-share-overlay:before{
	top:50%;
	left:50%;
	content:'';
	width:30em;
	height:30em;
	margin-top:-15em;
	border-radius:50%;
	margin-left:-15em;
	position:absolute;
	background:#77bef7;
	-webkit-transform:inherit;
	        transform:inherit;
	-webkit-transition:inherit;
	transition:inherit;
}
.social-share-wrap .social-share-overlay .close{
	top:0;
	right:0;
	color:#eee;
	width:40px;
	height:40px;
	cursor:pointer;
	font-size:28px;
	font-weight:400;
	line-height:40px;
	text-align:center;
	position:absolute;
}
.social-share-wrap .social-share-overlay .social-share-links{
	position:relative;
}
.social-share-wrap .social-share-overlay .social-share-links a{
	opacity:0;
	color:#eee;
	margin:auto;
	max-width:75%;
	display:block;
	font-size:18px;
	margin-top:30px;
	line-height:24px;
	margin-bottom:30px;
	padding:10px 15px;
	border:2px solid;
	border-radius:25px;
	text-decoration:none;
	-webkit-transition:all .4s ease-in-out 0s;
	transition:all .4s ease-in-out 0s;
	-webkit-transition-delay:.5s;
	        transition-delay:.5s;
}
.social-share-wrap .social-share-overlay .social-share-links a:nth-child(1){
	-webkit-transform:translateY(2em);
	        transform:translateY(2em);
	-webkit-transition-duration:.4s;
	        transition-duration:.4s;
}
.social-share-wrap .social-share-overlay .social-share-links a:nth-child(2){
	-webkit-transform:translateY(3em);
	        transform:translateY(3em);
	-webkit-transition-duration:.6s;
	        transition-duration:.6s;
}
.social-share-wrap .social-share-overlay .social-share-links a:nth-child(3){
	-webkit-transform:translateY(4em);
	        transform:translateY(4em);
	-webkit-transition-duration:.8s;
	        transition-duration:.8s;
}
.social-share-wrap .social-share-overlay .social-share-links .fa{
	min-width:30px;
	font-size:24px;
}

.toggle:checked + .social-share-wrap .social-share-overlay{
	-webkit-transform:scale(1);
	        transform:scale(1);
}
.toggle:checked + .social-share-wrap .cover{
	opacity:0;
	-webkit-transform:translateY(-100%);
	        transform:translateY(-100%);
}
.toggle:checked + .social-share-wrap .content .title,
.toggle:checked + .social-share-wrap .content .text,
.toggle:checked + .social-share-wrap .content .price{
	opacity:0;
	-webkit-transform:translateY(100%);
	        transform:translateY(100%);
}
.toggle:checked + .social-share-wrap .content .label{
	-webkit-transform:scale(0);
	        transform:scale(0);
}
.toggle:checked + .social-share-wrap .social-share-overlay a{
	opacity:1;
	-webkit-transform:translateY(0);
	        transform:translateY(0);
}
