Skip to main content
3 de 3
Editada para añadir petición hecha por @Sabrina, con código sugerido por @blonfu
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.

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>

Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190