JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image-effect-future">
    <div class="share-layer">
        <a class="share-button share-via-facebook" href="#"><i class=
        "fa fa-facebook"></i> Facebook</a> <a class=
        "share-button share-via-twitter" href="#"><i class="fa fa-twitter"></i>
        Twitter</a> <a class="share-button share-via-google" href="#"><i class=
        "fa fa-google"></i> Google +</a>
    </div>

    <div class="image-layer"><img alt="California surf" src=
    "http://demo.tutorialzine.com/2014/11/12-fun-sharing-button-effects/assets/pictures/tree.jpg"
    width="500"></div>
</div>

CSS

.image-effect-border {
			width: 500px;
			height: 300px;
			overflow: hidden;
			position: relative;
			border: 5px solid #DDD;
			margin: 0 auto;
			background-color: rgba(0,0,0,0.1);
			-webkit-transition: 1s;
			transition: 1s;
		}

		.image-effect-border:hover{
			box-shadow: 0 0 5px 2px rgba(0,0,0,0.4);
			border: 5px solid #444;
		}


		.image-effect-border .image-layer{
			position: absolute;
			top:0;
			left:0;
			height: 300px;
			overflow: hidden;
			-webkit-transition: 0.4s ease;
			transition: 0.4s ease;
			-webkit-transform: scale(1.1);
			transform: scale(1.1);
			z-index: 5;
		}

		.image-effect-border:hover .image-layer{
			-webkit-transform: scale(1);
			transform: scale(1);
		}


		.share-layer{
			position: absolute;
			top:0;
			left: 0;
			background-color: rgba(0,0,0,0.4);
			width: 100%;
			height: 100%;
			opacity: 0;
			-webkit-transition: 0.4s;
			transition: 0.4s;
			z-index: 10;
		}

		.image-effect-border:hover .share-layer{
			opacity: 1;
		}


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

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

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

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