Skip to main content
1 de 3
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

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>

Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190