Tooltip con múltiples enlaces y diferente contenido

cuatro enlaces distintos por miniatura y con contenidos diferentes en cada tooltip en función del lado por que hagamos :hover sobre la imagen. Todo en puro Css.

by kseso

HTML

<div class="multiples">
<a href="http://ksesocss.blogspot.com">KsesoCss<br/> puro CSS</a>
<a href="#">11 meses<br/>213 posts</a>
<a href="#">en Blogger<br/> desde 02-2012</a>
<a href="http://ksesocss.blogspot.com/2013/01/cuatro-tooltip-y-enlaces.html">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>

CSS

@import url(http://fonts.googleapis.com/css?family=Nunito:700);
html {font-family: nunito, sans-serif;}
div.multiples {
    float:left;
    position: relative;
    overflow: hidden;
}
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: 100%;
    opacity: 0;
    padding: 10% 0 0;
    position: absolute;
    text-align: center;
    width: 100%;    
    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;
}
div.multiples a:hover {
    bottom: 0;
    left: 0 !important;
    opacity: 1;
    right: 0;
    top: 0 !important;
}
div.multiples a:nth-child(1) {
    background: rgba(0,0,0, 0.55);
    left: 0;
    top: -80%;
}
div.multiples a:nth-child(2) {
    background: rgba(255,0,0, 0.55);
    left: 90%;
    top: 0;
}
div.multiples a:nth-child(3) {
    background: rgba(0,128,0, 0.55);
    left: 0;
    top: 80%;;
}
div.multiples a:nth-child(4) {
    background: rgba(0,0,255, 0.55);
    left: -90%;
    top: 0;
}