JSFiddle - React, Tailwind, and code Playground

HTML

<h1>TOOLPITS 4x1</h1>
<div class="multiples">
<a href="#" id="centro"></a>
<a href="http://ksesocss.blogspot.com" class="tool">ksesocss<br/> puro CSS</a>
<a href="#" class="tool">11 meses<br/>213 posts</a>
<a href="#" class="tool">en Blogger<br/> desde 02-2012</a>
<a href="http://ksesocss.blogspot.com/2013/01/cuatro-tooltip-y-enlaces.html" class="tool">Con licencia<br/>Beerware</a>
<img alt="galería múltiples tooltips y enlaces por cada imagen" src="http://4.bp.blogspot.com/-_1EHb6DgEEA/UP7dJAhzu5I/AAAAAAAAFVQ/kX53_KUgBCA/s1600/tooltip_1.jpg" />
</div>
<p class="descripcion">
Sobre la base del ejemplo de ksesocss en: <br/>
 <a href="http://ksesocss.blogspot.com/2013/01/cuatro-tooltip-y-enlaces.html">4 tooltips y 4 enlaces en el mismo elemento en función del lado por donde hagas :hover</a><br/>
 Descripción:<br/>
Cuatros tooltips que se pueden acceder desde las esquinas de la imagen.<br/>
También se pueden mostrar parcialmente ubicando el puntero del mouse en el centro de la imagen para luego hacer hover sobre el Tooltips que nos interese.<br/>
</p>
<p class="descripcion">
Creo que esto ya lo he visto, o tal vez no, con lo cual quiero decir que la idea tal vez no sea muy original, pero no es un copipaste, excepto la base de kseso debidamente aclarado al inicio, y por lo cual será enviada la respectiva cerveza a la brevedad. 
</p>

CSS

@import url(http://fonts.googleapis.com/css?family=Nunito:700);
html {font-family: nunito, sans-serif;}
h1{margin:0 auto;
width:300px;}
div.multiples {
    margin:10px auto;
    position: relative;
    overflow: hidden;
	width:300px;
}
div.multiples img {
    width: 100%;
}


div.multiples a {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: white;
    display: table-cell;
    font-size: 4rem;
    height: 5%;
    opacity: 1;
	overflow:hidden;
    padding: 0;
    position: absolute;
    text-align: center;
    width: 5%;    
    text-decoration: none;
    line-height: 100px;    
    -moz-transition: all 0.5s linear 0s;
    -webkit-transition: all 0.5s linear 0s;
    -o-transition: all 0.5s linear 0s;
    -ms-transition: all 0.5s linear 0s;
    transition: all 0.5s linear 0s;
}



/* porpiedades iniciales de los tooltips  */
div.multiples a:nth-child(1) {
    left: 10%;
    top: 10%;
	width:80%;
	height:80%;
	transition: all 0.5s linear;
	-webkit-transition:all 0.5s linear;
}
div.multiples a:nth-child(2) {
    background: rgba(0,0,0, 0.55);
    left: 0;
    top:  0;
}
div.multiples a:nth-child(3) {
    background: rgba(255,0,0, 0.55);
    right: 0%;
    top:  0;
}
div.multiples a:nth-child(4) {
    background: rgba(0,128,0, 0.55);
    right: 0;
    bottom: 0;
}
div.multiples a:nth-child(5) {
    background: rgba(0,0,255, 0.55);
    left: 0;
    bottom: 0;
}




#centro:hover{
	background:rgba(255,255,255, 1);
	top:40% !important;
	left:40% !important;
	width:20%;
	height:20%;
	border-radius:100px;

	z-index:5;
	}

#centro:hover ~ a[class="tool"]{
	height: 50%;
	padding: 10px 0 0;
	width:  50%;
		opacity: 1;
}



div.multiples a:hover {
    opacity: 1;
	height:100%;
	width:100%;
	z-index:10;
}




.descripcion{
	background:rgba(150, 205, 250, 0.5);
	border:1px solid #396;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	margin:10px auto;
	padding:20px;
	text-align:left;
	width:80%;
	box-shadow:10px 10px 20px #CCC;
	}
.descripcion...