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