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>