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`.

> 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:

<!-- 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 -->