<div class="frame">
	<div class="picture"></div>
		<div class="social twitter">
			<a href="https://twitter.com/tamer_aka_remat" target="_blank">
				<i class="fa fa-twitter"></i>
			</a>
		</div>
	
		<div class="social linkedin">
			<a href="https://www.linkedin.com/in/amtamer/?locale=en_US" target="_blank">
				<i class="fa fa-linkedin"></i>
			</a>
		</div>
	
		<div class="social codepen">
			<a href="https://codepen.io/tamer_aka_remat/" target="_blank">
				<i class="fa fa-codepen"></i>
			</a>
		</div>
</div>
$body:#282828;
$twitter:#55acee;
$linkedin:#007bb5;
$codepen:#FFDD40;
$transition:all 900ms cubic-bezier(0.075, 0.82, 0.165, 1);
%focus-it{
	top:0;
	left:0;
	width:100%;
	height:100%;
	border-radius:0;
	opacity:.8;
	z-index:1;
	cursor:pointer;
	i{
		opacity:1;
		font-size:20vw;
		margin: 15vw 33vw;
	}
	
}

body{
	width:100%;
	height:100vh;
	background-color:$body;
	display: flex;
  align-items: center;
  justify-content: center;
	.frame{
		width:80vw;
		height:50vw;
		border-radius:5%;
		overflow:hidden;
		position:relative;
		.picture{
			width:100%;
			height:100%;
			background-image:url('https://pbs.twimg.com/profile_images/1357814327152107521/cYKRxMcZ_400x400.jpg');
			z-index:0;
    	background-position:center;
			background-repeat:no-repeat;
			background-size:cover;
			transition:$transition;
			filter: grayscale(100%);
		}
		.social{
			position:absolute;
			right:2vw;
			width:5vw;
			height:5vw;
			border-radius:50%;
			z-index:2;
			a{
				
				display:contents;
				i{
					color:white;
					margin:7px;
					opacity:0;
				}
			} 
			&.twitter{
				bottom:2vw;
				background-color:$twitter;
				&:hover,&:focus{@extend %focus-it;}
				
			}
			&.linkedin{
				bottom:10vw;
				background-color:$linkedin;
				&:hover,&:focus{@extend %focus-it;}
			}
			&.codepen{
				bottom:18vw;
				background-color:$codepen;
				&:hover,&:focus{@extend %focus-it;}
			}
		}
		&:hover,&.focus{
			.picture{
				transition:$transition;
				transform:scale(1.3) rotate(10deg);
			}
		}
		
	}
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.