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.
Copio el 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>
Muchas gracias por vuestra ayuda!!