html – Hover effect with images and text

Question:

I need to do the hover effect on some thumbnails. What I want is when I hover over the mouse, the same image appears with 70% opacity and white text.

I am doing it with bootstrap so I put the class img-responsive and img-circle in the thumbnails because I want them to have a circular shape.

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>

Answer:

Here is an example of how you could do it with explanations in the CSS.

I had to modify the structure of the HTML a bit in order to style the text. That is, I have added an internal <div> .

It is a responsive solution, which centers the thumbnail on the <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>
Scroll to Top