<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
This Pen doesn't use any external JavaScript resources.