Aquí te dejo una posible alternativa. Lo que hace: - El enlace dentro de la columna se pone con posición relativa. - Añade un `span` con posición absoluta que contendrá el texto y que estará escondido. - El `span` se centra usando una transformación `translate` de -50% horizontal y verticalemente. - Cuando se pone el ratón encima del enlace, el `span` con el texto se mostrará y la imagen se clareará con un `opacity:0.7`. Aquí dejo una demo añadiendo esos cambios a tu código: <!-- begin snippet: js hide: false console: true --> <!-- language: lang-css --> .rings a { display:inline-block; position:relative; } .rings a span { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); color:white; display:none; } .rings a:hover span { display:block; } .rings a:hover img { opacity:0.7; } <!-- language: lang-html --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <section class="row text-center col-md-12 center-block text-center"> <div class="col-sm-6 col-md-3"> <div class="rings"> <a href="webdesign.html"> <img class="img-responsive img-circle" src="http://lorempixel.com/200/200/animals" alt="1" /> <span>Animals</span> </a> </div> </div> <div class="col-sm-6 col-md-3"> <div class="rings"> <a href="webdesign.html"> <img src="http://lorempixel.com/200/200/nature" class="img-responsive img-circle" alt="2" /> <span>Nature</span> </a> </div> </div> <div class="col-sm-6 col-md-3"> <div class="rings"> <a href="webdesign.html"> <img src="http://lorempixel.com/200/200/people" class="img-responsive img-circle" alt="3" /> <span>People</span> </a> </div> </div> <div class="col-sm-6 col-md-3"> <div class="rings"> <a href="webdesign.html"> <img src="http://lorempixel.com/200/200/sports" class="img-responsive img-circle" alt="4" /> <span>Sports</span> </a> </div> </div> <div class="col-sm-6 col-md-3"> <div class="rings"> <a href="webdesign.html"> <img src="http://lorempixel.com/200/200/cats" class="img-responsive img-circle" alt="5" /> <span>Cats</span> </a> </div> </div> <div class="col-sm-6 col-md-3"> <div class="rings"> <a href="webdesign.html"> <img src="http://lorempixel.com/200/200/abstract" class="img-responsive img-circle" alt="6" /> <span>Abstract</span> </a> </div> </div> <div class="col-sm-6 col-md-3"> <div class="rings"> <a href="webdesign.html"> <img src="http://lorempixel.com/200/200/" class="img-responsive img-circle" alt="7" /> <span>Random</span> </a> </div> </div> <div class="col-sm-6 col-md-3"> <div class="rings"> <a href="webdesign.html"> <img src="http://lorempixel.com/200/200/dogs" class="img-responsive img-circle" alt="8" /> <span>Dogs</span> </a> </div> </div> </section> <!-- end snippet -->