JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rSociaux" class="col-md-6 noSpace">
	<a href="http://www.facebook.com/lesdieuxduvin" target="_blank" id="bg-fb" class="tile-share">
	    <div  class="social-color-bg fb"></div>
	    <svg class="ontop" height="100" width="100">
  	        <circle cx="50" cy="50" r="20"  fill="blue" />
	    </svg>
	</a>
	<a href="http://www.twitter.com/lesdieuxduvin" target="_blank" id="bg-tw" class="tile-share">
	    <div class="social-color-bg twitter"></div> 
	    <svg class="ontop" height="100" width="100">
  	        <circle cx="50" cy="50" r="20"  fill="yellow" />
	    </svg>
	</a>
	<a href="http://www.twitter.com/lesdieuxduvin" target="_blank"  id="bg-li" class="tile-share">
	    <div class="social-color-bg linkedin"></div> 
	    <svg class="ontop" height="100" width="100">
            <circle id="svgLi" cx="50" cy="50" r="20"  fill="red" />
        </svg>
    </a>
</div>

CSS

#rSociaux {
	background-color: #a55fa2;
}

.ontop {
	position: relative;
	z-index: 10;
}

.tile-share {
	display: inline-block;
	position: relative;
	left: 33%;
	-webkit-transform: translateX(-50%) translateY(-0%);
	-moz-transform: translateX(-50%) translateY(-0%);
	-ms-transform: translateX(-50%) translateY(-0%);
	-o-transform: translateX(-50%) translateY(-0%);
	transform: translateX(-50%) translateY(-0%);
}

#rSociaux {
	overflow: hidden;
}

#rSociaux svg {
    position: relative;
}

#rSociaux .social-color-bg {
	pointer-events: none;
	position: absolute;
	border-radius: 100%;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	transition: 1s;
}

#rSociaux .social-color-bg.fb {
	background: blue;
}

#rSociaux .social-color-bg.twitter {
	background: yellow;
}

#rSociaux .social-color-bg.linkedin {
	background: red;
}


#rSociaux .tile-share:hover .social-color-bg {
	width: 100% !important;
	height: 100% !important;
	-webkit-transform: scale(20);
	-moz-transform: scale(20);
	-ms-transform: scale(20);
	-o-transform: scale(20);
	transform: scale(20);
}

#rSociaux .tile-share:hover .social-color-bg svg {
    
position:relative;
}
#rSociaux .tile-share{
    z-index:10;
}

#rSociaux .tile-share:hover{
    z-index:9;
}