JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <h1>Effect Button</h1>
    
    <div class="image-effect-simple">
        
        <div class="share-layer">
            <a href="#" class="share-button share-via-facebook">
                <i class="fa fa-facebook"></i>
                Facebook
            </a>
            
            <a href="#" class="share-button share-via-twitter">
                <i class="fa fa-twitter"></i>
                Twitter
            </a>
            
            <a href="#" class="share-button share-via-google">
                <i class="fa fa-google"></i>
                Google +
            </a>
        </div>
        
        <div class="image-layer">
            <img src="http://www.peugeot.com/images/FICHES_PRODUITS/1-Produits_Services/6-Peugeot_Design_Lab/Studio/Peugeot-Design-Lab-DL121-01.jpg" width="500" alt="California surf">
            </div>
            
        </div>
        
    </div>

CSS

body {
		font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;	
	}
	
	.container {
		width: 500px;
		margin: auto;
		text-align: center;	
	}

	.image-effect-simple{
			width: 500px;
			height: 300px;
			overflow: hidden;
			position: relative;
			margin: 0 auto;
			box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
		}

		.image-effect-simple .image-layer{
			position: absolute;
			top:0;
			left: 0;
			height: 300px;
			overflow: hidden;
			z-index: 1;

			-webkit-transition: 0.4s ease;
			transition: 0.4s ease;
		}

		.image-effect-simple:hover .image-layer{
			transform: translateY(-50px);
			-webkit-transform: translateY(-50px);
			-webkit-filter: blur(1px);
		}

		.image-effect-simple .share-layer{
			position: absolute;
			bottom:-100px;
			left: 0;
			background-color: #fff;
			width: 100%;
			height: 100px;
			-webkit-transition: 0.4s;
			transition: 0.4s;
			z-index: 10;
		}

		.image-effect-simple:hover .share-layer{
			transform: translateY(-100px);
			-webkit-transform: translateY(-100px);
		}

		.share-button{
			display: inline-block;
			text-decoration: none;
			color: #ffffff;
			padding: 12px;
			width: 80px;
			border-radius: 2px;
			margin:	30px 10px;
		}

		.share-via-facebook{
			background-color:#3b5998;
		}

		.share-via-twitter{
			background-color:#00aced;
		}

		.share-via-google{
			background-color:#d34836;
		}