JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://normalize-css.googlecode.com/svn/trunk/normalize.css">
<div class="article-image-box"> <a id="share-box-overlay" href="#">link</a>

    <img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" />
    <div style="display: none" class="article-box-share"> <i class="fa fa-lg fa-link"></i>
 <i class="fa fa-lg fa-facebook"></i>
 <i class="fa fa-lg fa-twitter"></i>
<i class="fa fa-lg fa-tumblr "></i>
 <i class="fa fa-lg fa-google "></i>

    </div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
}
.article-image-box {
    position: relative;
    width: 100%;
    height: auto;
    text-align: center;
    overflow: hidden;
}
.article-image-box img {
    position: relative;
    display: block;
    min-height: 100%;
    width: 100%;
    opacity: 0.8;
}
.article-box-share {
    opacity: 0.8;
    color: #333;
    font-size: 90%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.article-box-share::before, .article-box-share::after {
    pointer-events: none;
}
.article-box-share {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
.article-box-share {
    top: auto;
    bottom: 0;
    padding: 1em 0;
    height: 1.5em;
    background: #333;
    color: #fff;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
.article-box-share > i {
    cursor: pointer;
}
.article-box-share > i {
    position: relative;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
}
.article-box-share > i::before {
    display: inline-block;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.article-box-share i {
    display: inline-block;
    margin: 5px 15px;
}
.article-image-box .article-box-share, .article-image-box .article-box-share > i {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

JavaScript

/*$('a').click(function() {
	$('.inner-pbody-child').css('display', 'block');
});*/

$('#share-box-overlay').click(function (e) {
    e.preventDefault();
    $('.article-box-share').slideToggle();
});