@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; }
<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>