``````<!--
Based on dribbble shot and principle repo:
https://dribbble.com/shots/2337668-Day-10-Social-Share
http://principlerepo.com/social-share/
-->

<div class="container">
<article class="story">
<a href="" class="btn btn--share">
<path d="M13.5 11c-0.706 0-1.342 0.293-1.797 0.763l-6.734-3.367c0.021-0.129 0.032-0.261 0.032-0.396s-0.011-0.267-0.032-0.396l6.734-3.367c0.455 0.47 1.091 0.763 1.797 0.763 1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5-2.5 1.119-2.5 2.5c0 0.135 0.011 0.267 0.031 0.396l-6.734 3.367c-0.455-0.47-1.091-0.763-1.797-0.763-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5c0.706 0 1.343-0.293 1.797-0.763l6.734 3.367c-0.021 0.129-0.031 0.261-0.031 0.396 0 1.381 1.119 2.5 2.5 2.5s2.5-1.119 2.5-2.5c0-1.381-1.119-2.5-2.5-2.5z"></path>
</svg>
</a>
<div class="story__image" style="background-image: url('https://static01.nyt.com/images/2015/11/03/science/03NAVIGATESUB/03NAVIGATESUB-superJumbo.jpg')"></div>
<div class="story__body">
<h1>
A Hawaiian Canoe Crosses the Oceans, Guided by Sun and Stars
</h1>
<p>
It’s likely to cause a few double takes, even among seen-it-all New Yorkers.
<br />
<br />
Next June, a working replica of a traditional Hawaiian voyaging canoe — 62 feet long, double-hulled, with two powerful crab-claw sails — will make its way down the Hudson River, one small leg in a three-year journey.
</p>
</div>
</article>

<div class="overlay">
<article class="share">
<div class="share__image" style="background-image: url('https://static01.nyt.com/images/2015/11/03/science/03NAVIGATESUB/03NAVIGATESUB-superJumbo.jpg')"></div>
<h3 class="share__title">
A Hawaiian Canoe Crosses the Oceans, Guided by Sun and Stars
</h3>
<a href="https://codepen.io/zzavrski/pen/GZXoMg" class="btn btn--fb">
<path d="M9.5 3h2.5v-3h-2.5c-1.93 0-3.5 1.57-3.5 3.5v1.5h-2v3h2v8h3v-8h2.5l0.5-3h-3v-1.5c0-0.271 0.229-0.5 0.5-0.5z"></path>
</svg>
</a>
<a href="https://codepen.io/zzavrski/pen/GZXoMg" class="btn btn--tw">
<path d="M16 3.538c-0.588 0.263-1.222 0.438-1.884 0.516 0.678-0.406 1.197-1.050 1.444-1.816-0.634 0.375-1.338 0.65-2.084 0.797-0.6-0.638-1.453-1.034-2.397-1.034-1.813 0-3.281 1.469-3.281 3.281 0 0.256 0.028 0.506 0.084 0.747-2.728-0.138-5.147-1.444-6.766-3.431-0.281 0.484-0.444 1.050-0.444 1.65 0 1.138 0.578 2.144 1.459 2.731-0.538-0.016-1.044-0.166-1.488-0.409 0 0.013 0 0.028 0 0.041 0 1.591 1.131 2.919 2.634 3.219-0.275 0.075-0.566 0.116-0.866 0.116-0.212 0-0.416-0.022-0.619-0.059 0.419 1.303 1.631 2.253 3.066 2.281-1.125 0.881-2.538 1.406-4.078 1.406-0.266 0-0.525-0.016-0.784-0.047 1.456 0.934 3.181 1.475 5.034 1.475 6.037 0 9.341-5.003 9.341-9.341 0-0.144-0.003-0.284-0.009-0.425 0.641-0.459 1.197-1.038 1.637-1.697z"></path>
</svg>
</a>
</article>
</div>
</div>``````
``````//VARIABLES
//Black
\$black-100: 	rgba(0,0,0,1);
\$black-90: 		rgba(0,0,0,0.9);
\$black-80: 		rgba(0,0,0,0.8);
\$black-70: 		rgba(0,0,0,0.7);
\$black-60: 		rgba(0,0,0,0.6);
\$black-50: 		rgba(0,0,0,0.5);
\$black-40: 		rgba(0,0,0,0.4);
\$black-30: 		rgba(0,0,0,0.3);
\$black-20: 		rgba(0,0,0,0.2);
\$black-10: 		rgba(0,0,0,0.1);

//White
\$white-100: 	rgba(255,255,255,1);
\$white-90: 		rgba(255,255,255,0.9);
\$white-80: 		rgba(255,255,255,0.8);
\$white-70: 		rgba(255,255,255,0.7);
\$white-60: 		rgba(255,255,255,0.6);
\$white-50: 		rgba(255,255,255,0.5);
\$white-40: 		rgba(255,255,255,0.4);
\$white-30: 		rgba(255,255,255,0.3);
\$white-20: 		rgba(255,255,255,0.2);
\$white-10: 		rgba(255,255,255,0.1);

// CUSTOM CODE

html {
font-size: 100%;
}
body {
background-color: lighten(\$black-100, 10%);
font-family: 'Noto Sans', sans-serif;
text-align: center;
}

.container {
background-color: \$white-100;
margin: 0 auto;
width: 100%;
max-width: 320px;
min-height: 568px;
margin: 0 auto;
position: relative;
overflow: hidden;
-webkit-box-shadow: 0px 9px 13px 0px \$black-30;
-moz-box-shadow: 0px 9px 13px 0px \$black-30;
box-shadow: 0px 9px 13px 0px \$black-30;
-webkit-transform: scale(1);
}

.story {

&__image {
width: 100%;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}

&__body {
text-align: left;

h1 {
font-size: 34px;
font-size: 2.125rem;
line-height: 38px;
line-height: 2.375rem;
font-weight: 700;
font-style: normal;
font-family: "nyt-cheltenham",georgia,"times new roman",times,serif;
font-style: italic;
}

p {
font-size: 17px;
font-size: 1.0625rem;
line-height: 26px;
line-height: 1.625rem;
font-weight: 400;
font-style: normal;
font-family: georgia,"times new roman",times,serif;
}
}
}

// btns
.btn {
position: absolute;
width: 40px;
height: 40px;
line-height: 40px;
transition: background .25s ease-in-out;
svg {
width: 16px;
height: 16px;
display: inline-block;
vertical-align: middle;
margin-top: -2px;

path {
fill: \$white-100;
}
}

&--share {
top: 10px;
left: 10px;
background: \$black-100;

&:hover {
background: \$black-70;
}
}

&--fb, &--tw {
top: auto;
right: auto;
bottom: -500%;
//top: 50%;
//left: 50%;
}

&--fb {
left: calc(50% - 50px);
background: rgba(#3B5998, 1);
}

&--tw {
left: calc(50% + 10px);
background: rgba(#4099FF, 1);
}
}

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: \$black-80;
opacity: 0;
visibility: hidden;

&.showed {
opacity: 1;
visibility: visible;
}
}

// share popup
.share {
position: absolute;
top: 10%;
width: 80%;
left: 10%;

&__image {
width: 100%;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 0;
overflow: hidden;
opacity: 0;
transform: translatey(-100px);
}

&__title {
text-align: left;
color: \$white-100;
height: 0;
overflow: hidden;
opacity: 0;
transform: translatey(-50px);
}
}``````
``````// variables
var \$fb = \$('.btn--fb'),
\$tw = \$('.btn--tw'),
\$share = \$('.btn--share'),
\$shareImg = \$('.share__image'),
\$shareTitle = \$('.share__title'),
\$overlay = \$('.overlay'),
\$ogTitle = \$("meta[property='og:title']").attr('content'),
\$ogImage = \$("meta[property='og:image']").attr('content'),
\$ogDesc = \$("meta[property='og:description']").attr('content');

// TweenMax TL
var tlTW = new TimelineMax({paused: true});
var tlFB = new TimelineMax({paused: true});
var tlShare = new TimelineMax({paused: true});
var tlClose = new TimelineMax({paused: true});

.to(\$fb, 0.1, {autoAlpha: 0}, 'openTW')
.to(\$overlay, 0.3, {autoAlph: 1}, 'openTW')
.to(\$shareImg, 0.7, { paddingBottom: '56.25%', y: 0, autoAlpha: 1, delay: 0.6, ease: Power4.easeOut}, 'openTW')
.to(\$shareTitle, 0.6, {height: 'auto', autoAlpha: 1, y: 0, delay: 0.7, ease: Power4.easeOut}, 'openTW')
.to(\$tw, 0.6, {left: 0, width: '100%', borderRadius: 0, ease: Power4.easeInOut, onComplete: function() { \$tw.addClass('can-share') }}, 'openTW')

.to(\$tw, 0.1, {autoAlpha: 0}, 'openFB')
.to(\$overlay, 0.3, {autoAlpha: 1}, 'openFB')
.to(\$shareImg, 0.7, { paddingBottom: '56.25%', y: 0, autoAlpha: 1, delay: 0.6, ease: Power4.easeOut }, 'openFB')
.to(\$shareTitle, 0.6, {height: 'auto', autoAlpha: 1, y: 0, delay: 0.7, ease: Power4.easeOut}, 'openFB')
.to(\$fb, 0.6, {left: 0, width: '100%', borderRadius: 0, ease: Power4.easeInOut, onComplete: function() { \$fb.addClass('can-share') }}, 'openFB')

.to(\$overlay, 0.3, {autoAlpha: 1}, 'openShare')
.to(\$fb, 0.6, {bottom: '10px', ease: Back.easeOut.config(1.5)}, 'openShare')
.to(\$tw, 0.8, {bottom: '10px', ease: Back.easeOut.config(1.5)}, 'openShare')

// Share
function openShare(e) {
e.preventDefault();
if(tlShare.progress() < 1){
tlShare.play();
} else {
tlShare.restart();
}
}

var doFB = function (e) {
e.preventDefault();
if(!\$(this).hasClass('can-share')) {
if(tlFB.progress() < 1){
tlFB.play();
} else {
tlFB.restart();
}
} else {
// share it
\$url = \$(this).attr('href');
}
}

var doTW = function (e) {
e.preventDefault();
if(!\$(this).hasClass('can-share')) {
if(tlTW.progress() < 1){
tlTW.play();
} else {
tlTW.restart();
}
} else {
// share it
\$url = \$(this).attr('href');
}
}

// set to default
var setDefault = function (\$el){
TweenMax.set(\$fb, { clearProps: 'all'});
TweenMax.set(\$tw, { clearProps: 'all'});
TweenMax.set(\$shareTitle, { clearProps: 'all'});
TweenMax.set(\$shareImg, { clearProps: 'paddingBottom', y: '0'});
TweenMax.set(\$overlay, { clearProps: 'all'});
\$tw.removeClass('can-share');
\$fb.removeClass('can-share');
}

// actions
\$share.on('click', openShare);
\$fb.on('click', doFB);
\$tw.on('click', doTW);

// outside click
\$(document).mouseup(function (e)
{
var container = \$(".overlay article");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
setDefault();
}
});``````

### External CSS

This Pen doesn't use any external CSS resources.