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:
.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;
}
<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>