10

Necesito hacer el efecto hover sobre unos thumbnails. Lo que quiero es al pasar el ratón por encima, aparezca la misma imagen con una opacidad del 70% y un texto en blanco.

Lo estoy haciendo con bootstrap por lo que a los thumbnails les puse la class img-responsive e img-circle porque quiero que tengan forma circular.

HTML:

<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="images/1.jpg" alt="1" />
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="images/2.jpg" class="img-responsive img-circle" alt="2" />
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="images/3.jpg" class="img-responsive img-circle" alt="3" />
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="images/4.jpg" class="img-responsive img-circle" alt="4" />
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="images/5.jpg" class="img-responsive img-circle" alt="5" />
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="images/6.jpg" class="img-responsive img-circle" alt="6" />
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="images/7.jpg" class="img-responsive img-circle" alt="7" />
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="images/8.jpg" class="img-responsive img-circle" alt="8" />
      </a>
    </div>
  </div>
</section>
2
  • Hola, Bienvenida. ¿tendrás una imagen de como esperas que quede? Adiconalmente ¿Que haz intentado?
    – Wilfredo
    Commented el 14 jun. 2016 a las 12:19
  • Wilfredo Hola, Gracias!. Perdona pero acabo de ver tu comentario.
    – Sabrina
    Commented el 15 jun. 2016 a las 14:13

2 respuestas 2

4

Aquí te dejo un ejemplo de como lo podrías hacer con explicaciones en el CSS.

Tube que modificar un poco la estructura del HTML para poder darle estilos al texto. Es decir, he agregado un <div> interno.

Es un solución responsive, que centra el thumbnail en el <div>.

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");

/* haces al div relativo, para controlar las posiciones internas */
.rings {
  position: relative;
  margin-top: 10px;
}

/* la imagen debe centrarse automaticamente */
.rings img {
  display: block;
  margin: 0 auto;
}

/* el titulo lo ubicamos en centro, pero puede moverse */
.rings .titulo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: transparent;
}

/* cuando pones el mouse sobre el anchor, opacidad de la imagen */
.rings a:hover img {
  opacity: 0.7;
}

/* cuando pones el mouse sobre el anchor, propiedades del texto */
.rings a:hover .titulo {
  color: white;
}
<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/120/120/" alt="1" />
        <div class="titulo">Texto</div>
      </a>
    </div>
  </div>
  <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/120/120/" alt="1" />
        <div class="titulo">Texto</div>
      </a>
    </div>
  </div>
  <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/120/120/" alt="1" />
        <div class="titulo">Texto</div>
      </a>
    </div>
  </div>
  <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/120/120/" alt="1" />
        <div class="titulo">Texto</div>
      </a>
    </div>
  </div>
</section>

3

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>

9
  • 1
    jjaja.. buena aclaracion.. puse hover sobre el anchor pero este ocupa toda la celda. esa es la diferencia. Commented el 14 jun. 2016 a las 14:16
  • rnd, alvaro muchas gracias!! Ahora sí que funciona pero me expliqué mal porque el efecto de opacidad lo quiero pero con color negro para que la imagen quede bastante oscura. En esta página podéis ver ese efecto: velvet.ee/brands. Probé a añadirle un background negro a .rings a:hover img pero no funciona
    – Sabrina
    Commented el 14 jun. 2016 a las 17:15
  • 3
    Puedes hacer una cosa, añadir al codigo de Alvaro esta clase: .rings a:hover { background:black; border-radius:50%;} Si lo quieres más oscuro cambias la opacidad en .rings a:hover img
    – user7176
    Commented el 15 jun. 2016 a las 9:32
  • 1
    @Sabrina puedes ver la demo con el efecto que comentabas
    – Alvaro Montoro
    Commented el 15 jun. 2016 a las 9:47
  • 1
    @Sabrina es cierto, es culpa del border-radius en el :hover. Se puede solucionar poniendo border-radius:50%; también en el enlace, en rings a. De esta forma solo hace el hover en el circulo, y no en el cuadrado original como pasa ahora
    – user7176
    Commented el 28 jun. 2016 a las 18:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.