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óntranslate
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 unopacity:0.7
.
Nota: Me acabo de dar cuenta de que mi solución es bastante parecida a la de rnd, una diferencia entre ambas es que en lo que propongo, el texto sólo se ve cuando pones en ratón encima del enlace (el círculo) en lugar de en toda la celda.
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 {
background:black;
border-radius:50%;
}
.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>